/* Integra design tokens — source: Integra Brand Guide v1.0
   Light is the default. Dark is the guide's "Ink on light, Paper on dark"
   surface, built properly: every page follows the system preference on its
   own, and the header toggle (js/theme.js) can override either way.
   Contrast ratios below are computed WCAG 2.x values, not estimates. */

:root {
  color-scheme: light;

  /* Core palette */
  --ink: #1C1B22;      /* primary text, dark surfaces, the mark — 16.38:1 on --paper */
  --ink-hover: #2E2D36; /* lightened ink — hover state for ink-filled surfaces */
  --paper: #FAFAFB;    /* primary background — never pure white */
  --blurple: #5865F2;  /* THE accent. Non-text uses: chart strokes, fills, buttons, underlines. <10% of any surface */
  --blurple-text: #4E5ADF;       /* text-safe blurple — links and text buttons on paper (5.23:1) */
  --blurple-text-hover: #3D49C4; /* darker hover for text links on paper (6.83:1) */
  --haze: #7289DA;     /* tints, hover states on non-text fills, large fills where Blurple would shout */
  --graphite: #6E6D7A; /* secondary text, metadata, timestamps. Never body copy (4.87:1 on --paper) */
  --rule: #E5E4EB;     /* hairlines and dividers. Structure = rules + space, not boxes (1.21:1 — structure, not text) */

  /* Status — dashboards and reporting ONLY. Never decorative, never marketing */
  --live: #3BA55D;
  --attention: #FAA81A;
  --fault: #ED4245;      /* status dots and non-text marks only */
  --fault-text: #C0393C; /* text-safe fault — error copy on paper (5.17:1) */

  /* Surfaces & fills derived from the palette. Declared here (not in the page
     sheets) so one theme switch moves the whole site. */
  --row-hover: #F3F3F6;  /* record-row hover wash — one step off --paper (1.06:1) */
  --blurple-wash: rgba(88, 101, 242, 0.10); /* avatar chip fill; --blurple-text on it reads 4.61:1 */

  /* The Ink band — the landing statement band, the landing footer, the login
     panel. A dark surface in BOTH themes: in dark it lifts one step off the
     page and gains a hairline edge so it cannot vanish into it. */
  --band-surface: #1C1B22;
  --band-ink: #FAFAFB;     /* copy on the band — 16.38:1 */
  --band-edge: transparent; /* on light the band is already distinct; no hairline needed */

  /* Buttons. The primary button is the highest-contrast fill on the page, so
     it inverts with the theme rather than following --ink (which becomes text
     colour in dark). --accent-ink is fixed in both themes because --blurple is. */
  --btn-fill: #1C1B22;
  --btn-fill-hover: #2E2D36;
  --btn-ink: #FAFAFB;      /* 16.38:1 on --btn-fill */
  --accent-ink: #FAFAFB;   /* copy on a --blurple fill — 4.42:1, the ceiling for the brand accent */

  /* Theme-swapped assets. Marks and icons ship in both variants; CSS shows one
     per theme, so there is no swap flash and no JS involved. */
  --show-on-light: block;
  --show-on-dark: none;

  /* Type */
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Geometry — corners square to 2px, no shadows, no gradients */
  --radius: 2px;

  /* Motion — 150–200ms, ease-out, no bounce */
  --t-fast: 150ms;
  --t: 180ms;
  --ease: cubic-bezier(0.0, 0.0, 0.2, 1);

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Layout */
  --measure: 68ch;          /* body copy never exceeds ~75 chars */
  --page-max: 1200px;
  --page-pad: clamp(20px, 8vw, 96px); /* margins min 8% of surface width */
}

/* ---- Dark palette ----------------------------------------------------------
   Each value is a deliberate choice, not an inversion of the light token.
   Ratios are against the dark surface #16151B unless stated.

   --ink        #F2F2F5  body text. 16.24:1 — matches light's 16.38:1, so copy
                         carries exactly the same weight on either surface.
   --paper      #16151B  the page. One step DEEPER than brand Ink #1C1B22 so an
                         elevated row, band, or hover wash has somewhere to go.
   --rule       #2A2932  hairline. 1.26:1 against the page — the same quiet
                         structural step light has (1.21:1), not a bright line.
   --graphite   #9C9BA8  lifted from #6E6D7A, which would read 2.4:1 here.
                         6.63:1 — metadata stays legible instead of merely dim.
   --blurple    #5865F2  unchanged: it is a FILL (chart line, underline, dot),
                         and 3.94:1 against the page clears the 3:1 non-text bar.
   --blurple-text       #9AA4FF  7.89:1 — the light link blue is 2.5:1 here.
   --blurple-text-hover #B6BDFF  10.12:1 — hover lifts, as it darkens on light.
   --fault-text #FF6B6E  6.55:1. Error copy is read, not glanced at.
   --live       #43B96A  7.25:1 · --attention #F5B342 9.86:1 · --fault #F0585B
                         5.40:1 — status dots lifted so a 10px mark still reads.
   --ink-hover  #2E2D36  stays a dark raised fill: in dark, --ink is text, so
                         this token keeps its "raised Ink surface" meaning.
   --row-hover  #1E1D25  1.09:1 off the page — the same barely-there wash as
                         light's #F3F3F6 (1.06:1). Feedback, not a highlight.
   --band-*     #211F29  the Ink band lifts one step above the page (L* 7.1 →
                         12.4) AND takes a --rule hairline edge, so it reads as
                         a band instead of dissolving. Copy on it: 14.54:1.
   --btn-*      #E6E6EB fill with #16151B copy: 14.59:1. The primary button
                         inverts so it stays the loudest thing on the page.
   --blurple-wash 0.16   raised from 0.10: at 0.10 the avatar chip fill is
                         1.10:1 against the page and effectively invisible.
                         0.16 reads 1.18:1 and still carries --blurple-text at
                         6.71:1. Well under the 10% accent budget.

   Applied by BOTH selectors below: the media query follows the system unless
   the user has explicitly chosen light; the attribute selector lets the toggle
   force dark on a light system. Values live once, in --dk-*, so the two
   remap blocks cannot drift apart. */

:root {
  --dk-ink: #F2F2F5;
  --dk-ink-hover: #2E2D36;
  --dk-paper: #16151B;
  --dk-blurple-text: #9AA4FF;
  --dk-blurple-text-hover: #B6BDFF;
  --dk-graphite: #9C9BA8;
  --dk-rule: #2A2932;
  --dk-live: #43B96A;
  --dk-attention: #F5B342;
  --dk-fault: #F0585B;
  --dk-fault-text: #FF6B6E;
  --dk-row-hover: #1E1D25;
  --dk-blurple-wash: rgba(88, 101, 242, 0.16);
  --dk-band-surface: #211F29;
  --dk-btn-fill: #E6E6EB;
  --dk-btn-fill-hover: #F2F2F5;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ink: var(--dk-ink);
  --ink-hover: var(--dk-ink-hover);
  --paper: var(--dk-paper);
  --blurple-text: var(--dk-blurple-text);
  --blurple-text-hover: var(--dk-blurple-text-hover);
  --graphite: var(--dk-graphite);
  --rule: var(--dk-rule);

  --live: var(--dk-live);
  --attention: var(--dk-attention);
  --fault: var(--dk-fault);
  --fault-text: var(--dk-fault-text);

  --row-hover: var(--dk-row-hover);
  --blurple-wash: var(--dk-blurple-wash);

  --band-surface: var(--dk-band-surface);
  --band-ink: var(--dk-ink);
  --band-edge: var(--dk-rule);

  --btn-fill: var(--dk-btn-fill);
  --btn-fill-hover: var(--dk-btn-fill-hover);
  --btn-ink: var(--dk-paper);

  --show-on-light: none;
  --show-on-dark: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ink: var(--dk-ink);
    --ink-hover: var(--dk-ink-hover);
    --paper: var(--dk-paper);
    --blurple-text: var(--dk-blurple-text);
    --blurple-text-hover: var(--dk-blurple-text-hover);
    --graphite: var(--dk-graphite);
    --rule: var(--dk-rule);

    --live: var(--dk-live);
    --attention: var(--dk-attention);
    --fault: var(--dk-fault);
    --fault-text: var(--dk-fault-text);

    --row-hover: var(--dk-row-hover);
    --blurple-wash: var(--dk-blurple-wash);

    --band-surface: var(--dk-band-surface);
    --band-ink: var(--dk-ink);
    --band-edge: var(--dk-rule);

    --btn-fill: var(--dk-btn-fill);
    --btn-fill-hover: var(--dk-btn-fill-hover);
    --btn-ink: var(--dk-paper);

    --show-on-light: none;
    --show-on-dark: block;
  }
}