/* Alizés: the token layer shared by the website and the CRM. Navy, gold and blush are the exact logo colours from `VARIAÇÕES LOGO ALIZÉS.pdf`. The Ceará naturals (green, terracotta, sage, lagoon) stay as secondary colours for status and maps.
 *
 * Rules:
 *   - Nothing in the codebase writes a raw hex. Every colour comes from here.
 *   - Dark mode redefines surfaces only. The primary does not change between modes.
 *     If it has to change, the token set is wrong.
 *   - A per client theme overrides the BRAND block at the bottom and nothing else.
 */

:root {
  /* --- ramp: navy, the primary. From the Alizés logo sheet ------------------ */
  --navy-900: #111C27;
  --navy-800: #1C2D3D;
  --navy-700: #26394C;
  --navy-500: #4F5B66;
  --navy-100: #E3E7EB;

  /* --- ramp: gold, the accent. 500 is the logo gold, 2.66:1 on blush:
   * lines, outlined type and icons only. Text on light grounds uses 700. ---- */
  --gold-700: #7D6647;
  --gold-500: #AC926C;
  --gold-300: #CDB99A;
  --gold-100: #F1E9DC;

  /* --- ramp: blush, the page ground ----------------------------------------- */
  --blush-50:  #FAF1EC;
  --blush-100: #F4E6DE;
  --blush-200: #EBD8CC;

  /* --- ramp: verde carnaúba, secondary: status and maps ------------------ */
  --green-800: #10332C;
  --green-700: #14443A;
  --green-600: #1B5A4D;
  --green-500: #27735F;
  --green-200: #BFD8D0;
  --green-100: #DDEBE5;
  --green-50:  #EFF6F3;

  /* --- ramp: terracota, secondary warm natural ----------------------------
   * White text only from 700 down. 500 fails contrast under white text. */
  --terra-800: #6E3417;
  --terra-700: #8A431F;
  --terra-500: #C96B3C;
  --terra-100: #F8E7DC;

  /* --- ramp: sálvia ------------------------------------------------------ */
  --sage-600: #6E9A92;
  --sage-200: #CBDCD7;
  --sage-100: #E4EDEA;

  /* --- ramp: lagoa ------------------------------------------------------- */
  --lagoa-700: #16495B;
  --lagoa-500: #2B7C97;
  --lagoa-100: #DDEDF2;

  /* --- ramp: caju, warning only ------------------------------------------ */
  --amber-700: #8A5E0F;
  --amber-500: #C98A1E;
  --amber-100: #FAEFD8;

  /* --- ramp: danger ------------------------------------------------------ */
  --red-700: #7E271F;
  --red-500: #A8362F;
  --red-100: #F7E3E1;

  /* --- ramp: areia, the neutrals ----------------------------------------- */
  --sand-0:   #FFFFFF;
  --sand-50:  #FAF7F2;
  --sand-100: #F4EFE8;
  --sand-200: #E9E2D7;
  --sand-300: #E4DDD2;
  --ink-900:  #232722;
  --ink-700:  #55584F;
  --ink-500:  #6C6F67;
  --ink-400:  #7C7F76;

  /* --- purpose: surfaces -------------------------------------------------- */
  --page:      var(--blush-50);
  --surface-1: var(--sand-0);
  --surface-2: var(--blush-100);
  --surface-3: var(--blush-200);
  --surface-dark: var(--navy-800);
  --border:        var(--blush-200);
  --border-strong: var(--gold-300);

  /* --- purpose: text ---------------------------------------------------- */
  --text:         var(--navy-800);
  --text-second:  var(--navy-500);
  --text-muted:   var(--navy-500);
  --text-on-fill: var(--blush-50);
  --text-on-dark: var(--blush-50);

  /* --- purpose: roles ------------------------------------------------------ */
  --fill-primary:       var(--navy-800);
  --fill-primary-hover: var(--navy-700);
  --bg-primary:         var(--navy-100);
  --text-primary-role:  var(--navy-800);

  --fill-accent: var(--gold-500);
  --bg-accent:   var(--gold-100);
  --text-accent: var(--gold-700);
  --line-accent: var(--gold-500);

  --fill-success: var(--green-600);
  --bg-success:   var(--green-100);
  --text-success: var(--green-800);

  --fill-warning: var(--amber-500);
  --bg-warning:   var(--amber-100);
  --text-warning: var(--amber-700);

  --fill-danger: var(--red-500);
  --bg-danger:   var(--red-100);
  --text-danger: var(--red-700);

  --fill-info: var(--lagoa-500);
  --bg-info:   var(--lagoa-100);
  --text-info: var(--lagoa-700);

  /* --- typography ----------------------------------------------------------
   * Cormorant Garamond for display, Public Sans for body and interface. Public Sans was chosen
   * because it stays legible at 11px in a dense table, which is where the CRM
   * spends most of its time. */
  --font-display: 'Cormorant Garamond', ui-serif, Georgia, serif;
  --font-sans:    'Public Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-display: 38px;
  --text-h1:      28px;
  --text-h2:      22px;
  --text-h3:      16px;
  --text-body:    14px;
  --text-small:   12.5px;
  --text-caption: 11px;
  --text-label:   10px;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.55;

  --tracking-label: 0.1em;
  --tracking-tight: -0.015em;

  /* --- space, radius, motion ----------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  --control-h: 38px;

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* --- breakpoints, for reference ------------------------------------------
   * The previous CRM had 4 media queries across 1,123 lines of CSS, and every
   * mobile bug traced back to that. Use all four:
   * 520px phone, 768px tablet, 1024px laptop, 1280px desktop */
}

/* Dark mode. Surfaces invert, the primary does not. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --page:      #14201C;
    --surface-1: #1C2B26;
    --surface-2: #233530;
    --surface-3: #2A3E37;
    --border:        #2E423B;
    --border-strong: #3A5149;

    --text:        #E7EDE9;
    --text-second: #B3C2BC;
    --text-muted:  #9AAAA3;

    --bg-primary: #1E3A33;
    --text-primary-role: #A9D6C6;
    --bg-accent:   #3D2416;
    --text-accent: #EBBE9E;
    --bg-success:  #1E3A33;
    --text-success:#A9D6C6;
    --bg-warning:  #3A2E12;
    --text-warning:#E8C67E;
    --bg-danger:   #47211C;
    --text-danger: #F3BDB6;
    --bg-info:     #16333D;
    --text-info:   #9FCEDC;
  }
}

:root[data-theme='dark'] {
  --page:      #14201C;
  --surface-1: #1C2B26;
  --surface-2: #233530;
  --surface-3: #2A3E37;
  --border:        #2E423B;
  --border-strong: #3A5149;

  --text:        #E7EDE9;
  --text-second: #B3C2BC;
  --text-muted:  #9AAAA3;

  --bg-primary: #1E3A33;
  --text-primary-role: #A9D6C6;
  --bg-accent:   #3D2416;
  --text-accent: #EBBE9E;
  --bg-success:  #1E3A33;
  --text-success:#A9D6C6;
  --bg-warning:  #3A2E12;
  --text-warning:#E8C67E;
  --bg-danger:   #47211C;
  --text-danger: #F3BDB6;
  --bg-info:     #16333D;
  --text-info:   #9FCEDC;
}

/* --- BRAND ----------------------------------------------------------------
 * The only block a client pack overrides. clients/<name>/theme.css redefines
 * these and nothing else, which is what makes per client branding possible
 * without touching core CSS.
 */
:root {
  --brand-primary: var(--navy-800);
  --brand-accent:  var(--gold-500);
  --brand-display: var(--font-display);
}

html { background: var(--page); }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}