/* Product brand: the only place product pages (home, help, forms, builder, dashboard, sign-in,
   owner console) get colors, fonts and shapes from. Placeholder values under the working name
   until Lucia's brand kit (BUILD gate G3) replaces this file and public/brand/. Guest sites use
   their theme instead. Fonts are open-licensed and kept in the repo (brand/fonts/LICENSE-*); the
   headline font is its display cut, with the optical-size axis (opsz 18–72, weights 300–600). */
@font-face{font-family:"Newsreader"; font-weight:300 600; font-display:swap; src:url(/brand/fonts/newsreader-opsz.woff2) format("woff2")}
@font-face{font-family:"Newsreader"; font-weight:300 600; font-style:italic; font-display:swap; src:url(/brand/fonts/newsreader-opsz-italic.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans"; font-weight:400 700; font-display:swap; src:url(/brand/fonts/instrument-sans.woff2) format("woff2")}

:root{
  /* colors */
  --brand-paper:#F4EFE6;      /* linen: the page */
  --brand-panel:#E9E1D3;      /* oat: quiet panels and bands */
  --brand-card:#FBF8F2;       /* cards and fields */
  --brand-ink:#2B2925;        /* warm charcoal: text */
  --brand-ink-2:#5E5A52;      /* secondary text */
  --brand-line:#D9D1C3;       /* borders and dividers */
  --brand-rule:rgba(43,41,37,.14); /* hairlines on any background */
  --brand-accent:#9A5136;     /* clay: buttons on hover, links, numbers */
  --brand-accent-ink:#F4EFE6; /* text on the accent */
  --brand-accent-big:#A85A3C; /* clay for the big rolling H only (large type) */
  --brand-quiet:#8A9A82;      /* sage: bullets and dividers only, never text */
  --brand-dark:#33362F;       /* the dark panel */
  --brand-on-dark:#F4EFE6;
  --brand-on-dark-2:#C9D2C2;
  --brand-accent-on-dark:#E3A486;
  --brand-frame:#1F1E1B;      /* phone frames around screenshots */
  --brand-danger:#A3362A;     /* errors and delete */
  --brand-ok:#4F6B45;         /* success */
  /* type */
  --brand-font-body:"Newsreader",Georgia,serif;   /* headlines */
  --brand-font-ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* everything else */
  --brand-text:17px;          /* smallest body text */
  /* shapes */
  --brand-radius:10px;        /* buttons and fields */
  --brand-radius-md:16px;
  --brand-radius-lg:24px;     /* cards */
  --brand-tap:44px;           /* smallest tap target */
  --brand-shadow:0 18px 40px rgba(60,48,32,.16), 0 3px 8px rgba(60,48,32,.08);
  --brand-shadow-big:0 18px 40px rgba(60,48,32,.16), 0 3px 8px rgba(60,48,32,.08), 0 40px 80px rgba(60,48,32,.18);
  --brand-shadow-dark:0 30px 60px rgba(0,0,0,.35);
  --brand-bar-glass:rgba(244,239,230,.88); /* the top bar over the page */
  --brand-card-glass:rgba(251,248,242,.97);
  /* the product pages' one sheet of glass over still linen (light linen #FAF7F1, oat, sage, dark): each section's tint */
  --brand-glass-hero:rgba(250,247,241,.18);
  --brand-glass-light:rgba(250,247,241,.5);
  --brand-glass-frost:rgba(250,247,241,.6);
  --brand-glass-tint:rgba(250,247,241,.86);
  --brand-glass-oat:rgba(233,225,211,.8);
  --brand-glass-sage:rgba(138,154,130,.3);
  --brand-glass-sage-2:rgba(138,154,130,.42);
  --brand-glass-dark:rgba(51,54,47,.92);
  --brand-watermark:.085;      /* the still mark behind the home page */
  --brand-sage-soft:rgba(138,154,130,.22); /* chip circles, tags */
  --brand-sage-dot:rgba(138,154,130,.6);   /* dots */
  --brand-sage-line:rgba(138,154,130,.55); /* table lines, plan card edges */
  /* the photo-real phone (home/img/phone-frame.webp): a soft glare over its screen */
  --brand-phone-glare:linear-gradient(118deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.07) 26%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 78%, rgba(255,255,255,.05) 100%);
  --brand-phone-glare-edge:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 18px rgba(0,0,0,.18);
  --brand-page-shadow:-14px 0 28px rgba(0,0,0,.18); /* a phone screen turning like a page */
  /* the dark glass: its lines, the dim column and the faint clay wash on ours */
  --brand-on-dark-line:rgba(244,239,230,.14);
  --brand-on-dark-dim:rgba(244,239,230,.45);
  --brand-accent-on-dark-wash:rgba(227,164,134,.09);
}