/* ─────────────────────────────────────────────────────────────
   Fluxia — design tokens v0.3
   Source of truth: Fluxia Brief.md + Fluxia Brand.html
   (v0.1 · mai 2026)

   System: 70 % paper · 25 % ink · 5 % copper.
   Reserved, measured, Brazilian-warm.

   :root           = LIGHT values (default fallback)
   :root / [data-theme="light"] = LIGHT (default)
   [data-theme="dark"] = DARK

   Token names match the brief's Apêndice A verbatim.
   Drop BEFORE app.css.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Primary palette (3 colors do 95 % of the work) ─────── */
  --ink:           #15171A;    /* text + UI strokes (light), bg (dark) */
  --paper:         #F1ECE2;    /* bg (light), text (dark)              */
  --copper:        #B84A1F;    /* THE accent — 5 % rule                */

  /* ── Support — light mode ───────────────────────────────── */
  --paper-light:   #F8F4EA;    /* cards over paper                     */
  --paper-shade:   #E8E1D2;    /* sidebar, hover, banded sections      */
  --line:          #D9D2C2;    /* hairlines, dividers                  */
  --line-2:        #C5BDA9;    /* stronger dividers, input borders     */
  --muted:         #6B6862;    /* secondary text, mono labels          */
  --faint:         #9C9889;    /* tertiary, placeholder                */

  /* ── Support — dark mode (declared here, applied below) ─── */
  --ink-elev:      #1B1D21;    /* cards on dark                        */
  --ink-deep:      #101113;    /* sidebar / banded on dark             */
  --ink-line:      #2E3034;    /* dividers on dark                     */
  --ink-line-2:    #3A3C40;
  --ink-muted:     #8C8880;    /* secondary text on dark               */
  --ink-faint:     #5C5A53;

  /* ── Accent / accessory ─────────────────────────────────── */
  --copper-2:      #8E3812;    /* copper hover / pressed               */
  --copper-soft:   #F3E1D6;    /* copper bg tints (light)              */
  --copper-soft-2: #E9D2C0;
  --copper-ink:    #EFEBE0;    /* text on copper                       */
  --copper-ring:   rgba(184, 74, 31, 0.28);

  --teal:          #1F4D54;    /* water / gauges secondary             */
  --teal-2:        #143539;
  --teal-soft:     #D7E1E2;
  --sand:          #C9A66B;    /* gas highlight                        */
  --sand-soft:     #F1E5CB;

  /* ── States (discreet) ──────────────────────────────────── */
  --state-ok:        #1F6B4A;
  --state-ok-soft:   #D9E8DE;
  --state-warn:      #A8801F;
  --state-warn-soft: #F3E6C4;
  --state-warn-deep: #806115;
  --state-alert:     #A8331C;
  --state-alert-soft:#F3D7CC;
  --state-info:      #305A88;
  --state-info-soft: #DAE3EF;
  --state-unknown:   #807C72;
  --state-unknown-soft:#E3DECF;

  /* ── Typography ─────────────────────────────────────────── */
  /* Self-host in production (woff2). Google Fonts is fine for dev:
     <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"> */
  --font-sans:  "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale (matches brief §4.2) */
  --fs-display: 84px;   --lh-display: 92px;
  --fs-h1:      44px;   --lh-h1:      46px;
  --fs-h2:      24px;   --lh-h2:      29px;
  --fs-h3:      18px;   --lh-h3:      24px;
  --fs-body-l:  17px;   --lh-body-l:  26px;
  --fs-body:    15px;   --lh-body:    23px;
  --fs-body-s:  13px;   --lh-body-s:  20px;
  --fs-label:   11px;   --lh-label:   14px;
  --fs-mono-s:  11px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --tr-display: -0.035em;
  --tr-h1:      -0.022em;
  --tr-h2:      -0.010em;
  --tr-label:    0.12em;
  --tr-mono-up:  0.10em;

  /* ── Spacing scale (brief §4.2 — 4-pt) ──────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ── Radii (square by default) ──────────────────────────── */
  --radius:       0;
  --radius-soft:  2px;
  --radius-pill:  999px;

  /* ── Borders & shadows ──────────────────────────────────── */
  --hairline:        1px solid var(--line);
  --hairline-strong: 1px solid var(--line-2);

  /* Brand is matte — shadows are absent or extremely subtle. */
  --shadow-1:  0 1px 0 rgba(21, 23, 26, 0.04);
  --shadow-2:  0 2px 8px rgba(21, 23, 26, 0.08);
  --shadow-pop: 0 8px 32px rgba(21, 23, 26, 0.18);

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-w:        232px;
  --sidebar-w-mobile: 280px;
  --topbar-h:          52px;
  --content-max:     1240px;
  --gutter:           28px;

  /* ── Density (override on <html data-density>) ──────────── */
  /* Default = "regular". Linear-like density baseline. */
  --row-h:    38px;
  --pad-y:    10px;
  --pad-x:    14px;
  --gap-card: 16px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.3, 0.7, 0.4, 1);
  --t-fast:    120ms;
  --t-base:    180ms;
  --t-slow:    320ms;

  /* ── Z-index ────────────────────────────────────────────── */
  --z-sticky:  10;
  --z-overlay: 40;
  --z-modal:   50;
  --z-toast:   60;
}

/* ── Density variants ────────────────────────────────────── */
[data-density="compact"] {
  --row-h:    32px;
  --pad-y:     6px;
  --pad-x:    10px;
  --gap-card: 12px;
}
[data-density="comfy"] {
  --row-h:    46px;
  --pad-y:    14px;
  --pad-x:    18px;
  --gap-card: 20px;
}

/* ── Dark mode (set data-theme="dark" on <html>) ────────────────────────
   The swap follows the brief's appendix: --paper becomes the dark bg,
   --ink becomes the cream text. Every var() in app.css stays valid in
   both modes. */
[data-theme="dark"] {
  --paper:         #15171A;   /* page bg                         */
  --paper-light:   #1B1D21;   /* cards on dark                   */
  --paper-shade:   #101113;   /* sidebar / banded                */
  --ink:           #EFEBE0;   /* primary text                    */
  --line:          #2E3034;
  --line-2:        #3A3C40;
  --muted:         #8C8880;
  --faint:         #5C5A53;

  --copper-soft:    #3A1C10;
  --copper-soft-2:  #4A2A1A;

  --state-ok-soft:    #15331F;
  --state-warn-soft:  #3A2E0F;
  --state-alert-soft: #401C12;
  --state-info-soft:  #1A2A40;
  --state-unknown-soft:#2A2A26;

  --shadow-1:  0 1px 0 rgba(0, 0, 0, 0.30);
  --shadow-2:  0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.60);
}