@charset "UTF-8";
/* ==========================================================================
   CELADON · SEMANTIC TOKENS
   Layer 2. Names describe a ROLE, never a colour. Both themes share every
   name — the theme changes values, never structure.
   Scope: :root (via data-mode) or any subtree with .t-dark / .t-light.
   ========================================================================== */

/* ---- LIGHT GREEN ------------------------------------------------------ */
:root,
:root[data-mode="light"],
.t-light {
  color-scheme: light;

  --bg: var(--green-10);                 /* Porcelain */
  --surface: var(--green-25);            /* Mint Cream — Box/Table bg */
  --surface-strong: var(--green-75);     /* Honeydew — table header fill */
  --surface-highlight: var(--green-100); /* Título 5 highlight */
  --border: var(--green-75);             /* Box border, table lines */
  --border-control: var(--teal-600);     /* Input/checkbox borders (3:1+) */

  --text-primary: var(--green-950);      /* Texto normal */
  --text-secondary: var(--teal-600);     /* Subtítulo */
  --text-inverse: var(--green-10);
  --text-heading: var(--green-950);      /* Título */

  --brand-primary: var(--green-700);     /* Título 1 · Título 4 · top line */
  --brand-secondary: var(--green-650);   /* Título 2 */
  --brand-tertiary: var(--green-600);    /* Título 3 */
  --on-brand: var(--green-10);
  --brand-glow: var(--green-600);        /* Fern — cursor glow on brand fills */

  --status-positive: var(--emerald-700);
  --status-negative: var(--red-700);
  --status-warning: var(--amber-700);
  --status-info: var(--blue-700);
  --on-positive: var(--green-10);
  --on-negative: var(--green-10);
  --on-warning: var(--green-10);
  --on-info: var(--green-10);

  --scrim: rgb(16 32 31 / .42);
  --shadow-overlay: 0 1px 0 rgb(16 32 31 / .04), 0 24px 56px -24px rgb(16 32 31 / .28);
  --noise-opacity: .05;
  --grid-line: rgb(49 95 59 / .09);
}

/* ---- DARK GREEN ------------------------------------------------------- */
:root[data-mode="dark"],
.t-dark {
  color-scheme: dark;

  --bg: var(--green-950);                /* Carbon Black */
  --surface: var(--green-900);           /* Jet Black — Box/Table bg */
  --surface-strong: var(--green-850);    /* Evergreen — table header fill */
  --surface-highlight: var(--green-800); /* Deep Evergreen — Título 5 */
  --border: var(--green-850);            /* Box border, table lines */
  --border-control: var(--teal-500);     /* Input/checkbox borders (3:1+) */

  --text-primary: var(--green-50);       /* Mint Cream */
  --text-secondary: var(--teal-500);     /* Muted Teal — Subtítulo */
  --text-inverse: var(--green-950);
  --text-heading: var(--green-50);

  --brand-primary: var(--green-300);     /* Celadon */
  --brand-secondary: var(--green-400);   /* Willow Green */
  --brand-tertiary: var(--green-500);    /* Mint Leaf */
  --on-brand: var(--green-950);
  --brand-glow: var(--green-50);         /* Mint Cream — cursor glow on brand fills */

  --status-positive: var(--emerald-400);
  --status-negative: var(--red-400);
  --status-warning: var(--amber-400);
  --status-info: var(--blue-400);
  --on-positive: var(--green-950);
  --on-negative: var(--green-950); /* dark ink, not Mint Cream: green-50 on red-400 is 3.56:1, fails AA */
  --on-warning: var(--green-950);
  --on-info: var(--green-950);

  --scrim: rgb(8 16 15 / .72);
  --shadow-overlay: 0 1px 0 rgb(0 0 0 / .2), 0 28px 64px -24px rgb(0 0 0 / .6);
  --noise-opacity: .075;
  --grid-line: rgb(150 224 157 / .07);
}

/* ---- DERIVED (re-resolved inside every theme scope) ------------------- */
:root,
.t-dark,
.t-light {
  --focus-ring: var(--brand-primary);
  --scrim-strong: color-mix(in oklab, var(--green-950) 92%, transparent); /* lightbox: always dark */
  --link: var(--brand-primary);
  --rule: var(--brand-primary);

  --tint-brand: color-mix(in oklab, var(--brand-primary) 14%, transparent);
  --tint-positive: color-mix(in oklab, var(--status-positive) 14%, transparent);
  --tint-negative: color-mix(in oklab, var(--status-negative) 14%, transparent);
  --tint-warning: color-mix(in oklab, var(--status-warning) 16%, transparent);
  --tint-info: color-mix(in oklab, var(--status-info) 14%, transparent);
  --hover-fill: color-mix(in oklab, var(--brand-primary) 14%, transparent);

  /* Gradient library — derived only from the palette */
  --grad-subtle: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
  --grad-surface: linear-gradient(155deg, var(--surface) 0%, var(--surface-strong) 100%);
  --grad-brand: linear-gradient(115deg, var(--brand-primary) 0%, var(--brand-secondary) 55%, var(--brand-tertiary) 100%);
  --grad-hero:
    radial-gradient(90% 70% at 78% 12%, color-mix(in oklab, var(--brand-primary) 20%, transparent) 0%, transparent 62%),
    radial-gradient(60% 60% at 8% 100%, color-mix(in oklab, var(--brand-tertiary) 12%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  --grad-glow: radial-gradient(closest-side, color-mix(in oklab, var(--brand-primary) 32%, transparent) 0%, transparent 100%);
  --grad-interactive: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in oklab, var(--brand-primary) 22%, transparent) 0%, transparent 70%);
  --grad-rule: linear-gradient(90deg, var(--brand-primary), color-mix(in oklab, var(--brand-primary) 0%, transparent));
}

/* ---- Semantic shape (theme-independent) ------------------------------- */
:root {
  --radius-control: var(--radius-2);   /* buttons, inputs, selects */
  --radius-card: var(--radius-4);      /* boxes, cards */
  --radius-overlay: var(--radius-6);   /* modal, popover, toast */
  --radius-media: var(--radius-2);     /* images */
  --radius-pill: var(--radius-full);   /* tags, chips, status only */
  --header-h: 64px;
}

/* ---- Responsive motion scale ------------------------------------------ */
:root { --motion-scale: 1; --cursor-fx: 1; }
@media (max-width: 1024px) { :root { --motion-scale: .6; } }
@media (max-width: 640px)  { :root { --motion-scale: .35; } }
@media (hover: none), (pointer: coarse) { :root { --cursor-fx: 0; } }
@media (prefers-reduced-motion: reduce) { :root { --motion-scale: 0; --cursor-fx: 0; } }
:root.sim-rm { --motion-scale: 0; --cursor-fx: 0; }