/* Bright Digital AI, Wave 1 design tokens.
   One brand variable (--brand); every other gold tone is a resolved hex derived from it, so the
   contrast checker reads real values. If the brand colour changes, recompute the derived tones
   (formulas beside each) and run python tools/verify.py.
   Fonts are self-hosted: Outfit (OFL 1.1, LICENSE-outfit.txt) and Inter variable (OFL 1.1,
   LICENSE-inter.txt, from the npm package @fontsource-variable/inter 5.3.0, latin subset). */

@font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-var.woff2") format("woff2-variations"), url("/assets/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Brand */
  --brand: #C9A04A;          /* logo gold. Never text on light backgrounds (2.44:1) */
  --on-brand: #16181D;       /* text on gold, 7.28:1 */
  --brand-ink: #6F5829;      /* brand 55% + black. Gold text and icons, 6.77:1 on white */
  --brand-soft: #F9F4E9;     /* brand 12% + white. Tinted fills */
  --brand-line: #E5D1A8;     /* brand 48% + white. Gradient edges, rules */
  --brand-glow: rgba(201, 160, 74, 0.30);
  --sand-glow: rgba(214, 186, 140, 0.32);

  /* Surfaces and text (direction A, light) */
  --page: #FAF8F4;
  --page-2: #F4F1EA;
  --surface: #FFFFFF;
  --surface-2: #F3F0EA;
  --border: #E6E1D7;
  --border-strong: #CEC7B9;
  --text: #16181D;
  --text-2: #4A505C;         /* 8.10:1 on white */
  --text-3: #5B616C;
  --focus: #6F5829;
  /* Plan names (owner, 2026-10-04 "Cores dos planos"): Basic black, Premium gold, Enterprise petrol. */
  --plan-basic: #16181D;      /* 17.8:1 on white */
  --plan-premium: #8A6A24;    /* 5.04:1 on white, 4.75:1 on the page */
  --plan-enterprise: #16495B; /* 9.8:1 on white */
  --ok: #2E6E48; --ok-soft: #E5F1E8;
  --warn: #8A5E0F; --warn-soft: #FAEFD7;

  /* Chat (WhatsApp-like screen inside the device) */
  --chat-bg: #EFEAE2;
  --wa-head: #F0F2F5;
  --bubble-in: #FFFFFF;
  --bubble-out: #DCF5CF;
  --bubble-text: #111B21;
  --bubble-meta: #5A6670;
  --bubble-meta-out: #4A5A50;
  --wa-send: #00A884;

  /* Glass: header, phone bottom bar, menus and dialogs only (owner item 12) */
  --glass-strong: rgba(250, 248, 244, 0.90);
  --glass-edge: rgba(255, 255, 255, 0.9);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.25);

  /* Liquid Glass (owner, 2026-10-04: variant B won the A/B test and is the official style of every
     control: buttons, header, menus, phone bar, theme switch, price toggle, calculator, scene buttons).
     The one copy of these values; glass.css and components.css only read them. */
  --g-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --g-bar: rgba(250, 248, 244, 0.80);
  --g-bar-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
  --g-bar-edge: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(22, 24, 29, 0.07);
  --g-panel: rgba(255, 255, 255, 0.86);
  --g-panel-edge: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  --g-panel-line: rgba(22, 24, 29, 0.09);
  --g-sec: rgba(255, 255, 255, 0.62);
  --g-sec-line: rgba(22, 24, 29, 0.13);
  --g-sec-edge: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  --g-sec-drop: 0 1px 2px rgba(30, 24, 12, 0.06), 0 8px 20px -12px rgba(30, 24, 12, 0.30);
  --g-sec-sheen: rgba(255, 255, 255, 0.75);
  --g-sec-glint: rgba(201, 160, 74, 0.20);
  --g-pri-top: rgba(219, 192, 133, 0.90);
  --g-pri-mid: rgba(201, 160, 74, 0.90);
  --g-pri-bot: rgba(184, 146, 68, 0.92);
  --g-pri-line: rgba(122, 92, 34, 0.32);
  --g-pri-edge: inset 0 1px 0 rgba(255, 255, 255, 0.60), inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(96, 70, 22, 0.20);
  --g-pri-drop: 0 1px 2px rgba(30, 24, 12, 0.12), 0 10px 24px -12px rgba(150, 112, 40, 0.60);
  --g-pri-sheen: rgba(255, 255, 255, 0.42);
  --g-pri-glint: rgba(255, 249, 232, 0.42);
  /* The pointer light on the glass controls (toggle, theme switch, plan picker, scenes). Stronger than
     the buttons' light: the segments are small and the clear track is nearly white, so the buttons'
     value did not read (owner, 2026-10-04: "I still do not see it"). */
  --g-ctl-sec-glint: rgba(184, 140, 52, 0.42);
  --g-ctl-pri-glint: rgba(255, 252, 240, 0.78);
  --g-pill: rgba(255, 255, 255, 0.70);
  --g-pill-edge: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(22, 24, 29, 0.07);
  /* Theme switch: the quiet icon of the inactive segment (over 4.5:1 on the glass track) */
  --switch-icon: #5B616C;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(30, 24, 12, 0.06);
  --shadow: 0 1px 2px rgba(30, 24, 12, 0.05), 0 8px 24px rgba(30, 24, 12, 0.07);
  --shadow-lg: 0 2px 6px rgba(30, 24, 12, 0.06), 0 24px 60px rgba(30, 24, 12, 0.14), 0 60px 120px rgba(30, 24, 12, 0.08);

  /* Type: the only sizes allowed (design review finding 11), plus the h1 clamp */
  --font-display: "Outfit", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-21: 1.3125rem;
  --fs-26: 1.625rem;
  --fs-34: 2.125rem;
  --fs-44: 2.75rem;
  --fs-60: 3.75rem;
  --fs-h1: clamp(2.6rem, 1.4rem + 3.6vw, 4.25rem);
  --lh-body: 1.6;
  --lh-tight: 1.1;

  /* Space: 4 px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(64px, 7vw, 112px);
  --container: 1200px;
  --gutter: 16px;
  --header-h: 64px;

  /* Radii */
  --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Motion: UI under 300 ms, entrances once, transform and opacity only */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-press: 160ms;
  --t-ui: 220ms;
  --t-enter: 400ms;

  /* Layers */
  --z-content: 1; --z-sticky: 40; --z-header: 50; --z-bar: 45; --z-menu: 60; --z-toast: 80;

  color-scheme: light;
}

@media (min-width: 768px) { :root { --gutter: 32px; --header-h: 70px; } }

/* Dark theme (direction B), chosen with the header toggle. Light stays the default.
   Derived golds resolved from --brand: ink = brand 82% + white, soft = brand 13% + page,
   line = brand 42% + page. Contrast is measured in both themes by tools/verify.py. */
:root[data-theme="dark"] {
  --on-brand: #16181D;
  --brand-ink: #D3B16B;
  --brand-soft: #29241B;
  --brand-line: #5E4E2B;
  --brand-glow: rgba(201, 160, 74, 0.22);
  --sand-glow: rgba(120, 92, 48, 0.28);
  --page: #111214;
  --page-2: #16171A;
  --surface: #1A1B1E;
  --surface-2: #222327;
  --border: #2C2E33;
  --border-strong: #43454C;
  --text: #ECEAE4;
  --text-2: #B4B2AA;
  --text-3: #A3A19A;
  --focus: #D3B16B;
  --plan-basic: #ECEAE4;
  --plan-premium: #D3B16B;
  --plan-enterprise: #7EC8D8;
  --ok: #8CCFA5; --ok-soft: #1A2B21;
  --warn: #E8C67E; --warn-soft: #2E2612;
  --chat-bg: #0B141A;
  --wa-head: #202C33;
  --bubble-in: #202C33;
  --bubble-out: #005C4B;
  --bubble-text: #E9EDEF;
  --bubble-meta: #AEBAC1;
  --bubble-meta-out: #D3DDE1;
  --glass-strong: rgba(17, 18, 20, 0.90);
  --glass-edge: rgba(255, 255, 255, 0.10);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  --g-bar: rgba(17, 18, 20, 0.82);
  --g-bar-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
  --g-bar-edge: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  --g-panel: rgba(30, 31, 35, 0.86);
  --g-panel-edge: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --g-panel-line: rgba(255, 255, 255, 0.10);
  --g-sec: rgba(255, 255, 255, 0.06);
  --g-sec-line: rgba(255, 255, 255, 0.14);
  --g-sec-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --g-sec-drop: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 22px -12px rgba(0, 0, 0, 0.70);
  --g-sec-sheen: rgba(255, 255, 255, 0.09);
  --g-sec-glint: rgba(211, 177, 107, 0.16);
  --g-pri-line: rgba(255, 226, 160, 0.30);
  --g-pri-edge: inset 0 1px 0 rgba(255, 255, 255, 0.50), inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(60, 44, 14, 0.30);
  --g-pri-drop: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 26px -12px rgba(201, 160, 74, 0.45);
  --g-pri-sheen: rgba(255, 255, 255, 0.32);
  --g-pri-glint: rgba(255, 246, 222, 0.32);
  --g-ctl-sec-glint: rgba(222, 188, 118, 0.34);
  --g-ctl-pri-glint: rgba(255, 248, 228, 0.66);
  --g-pill: rgba(255, 255, 255, 0.07);
  --g-pill-edge: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --switch-icon: #A3A19A;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 30px 70px rgba(0, 0, 0, 0.55), 0 60px 140px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}