/* ============================================================================
   Design tokens — the BaselineZero warm system (design_v2/design_system/tokens/)
   ============================================================================
   The six token files of the handoff as one :root, with two changes:

   1. Poppins is SELF-HOSTED. The handoff imports it from Google Fonts; the Content-Security-Policy
      in src/web/security.js is font-src 'self', deliberately — a client portal must not call a
      third party on every page load. 300/400/500/600, latin subset, in public/fonts/.
   2. The rules the token files carry (.tabular, .eyebrow, the focus ring, ::selection, the
      reduced-motion override) live in app.css, not here: this file is tokens only, and the
      stylesheet test reads its :root block as such.

   CHANGING THE PALETTE MEANS EDITING THIS FILE AND NOTHING ELSE. Do not put a path containing an
   asterisk-slash in a comment here: that sequence ends the comment and the parser then eats the
   :root block — test/web/stylesheet.test.js remembers.
   ============================================================================ */

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/poppins-600.woff2') format('woff2');
}

:root {
  /* Poppins 300 carries the big Light numerals and titles; 500/600 carry rows, buttons and labels. */
  --font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  /* ---- Ground: warm, not grey. The page is the ground; lists sit directly on it. ---- */
  --ground: #F9F7F3;          /* page */
  /* The ground is layered, not flat: lavender warmth top-left, mint at the right edge, two faint rings echoing the day ring */
  --ground-layered: radial-gradient(circle at calc(100% - 60px) -40px, transparent 0 298px, rgba(124,31,224,.09) 299px 300.5px, transparent 302px), radial-gradient(circle at calc(100% - 60px) -40px, transparent 0 362px, rgba(0,184,169,.13) 363px 364.5px, transparent 366px), radial-gradient(860px 520px at 4% -6%, rgba(230,220,250,.7), transparent 62%), radial-gradient(700px 440px at 103% 34%, rgba(217,241,234,.7), transparent 62%), linear-gradient(180deg, #FBF9F5 0%, #F6F3EC 100%);
  --surface: #FFFFFF;         /* the one card per screen, tables */
  --tint: #F1EDE6;            /* ghost buttons, toggle track, chips */
  --tint-hover: #EAE5DC;
  --tile-hover: #EFEBE4;      /* rail tiles, avatars */
  --row-hover: #F3EFE8;
  --row-active: #EDE8DF;
  --hairline: #E6E0D5;        /* row rules, bar tracks */
  --rule-soft: #F1ECE3;       /* table row rules */
  --table-head: #FBF9F5;

  /* ---- Ink: warm black and its ramp. Nothing below --muted carries text. ---- */
  --ink: #1F1B17;
  --ink-2: #3F3830;           /* body copy inside blocks, inactive glyphs */
  --ink-3: #5A5248;           /* rail labels, monospace accounts */
  --muted: #6F675E;           /* every lede, meta, eyebrow. 5.6:1 on the ground */
  --faint: #8A8276;           /* struck-through done rows only */
  --disabled: #B8B0A4;        /* dashes, empty cells, neutral bars. Never text */
  --outline: #C9C1B4;         /* the empty circle */

  /* ---- Violet: the MSP side and the AI. One action color. ---- */
  --violet-700: #5C10AD;      /* links, active labels, eyebrows on the AI block */
  --violet-600: #6717BE;      /* primary hover */
  --violet-500: #7C1FE0;      /* primary button, active rail tile, tab underline, bell dot */
  --violet-100: #EDE6FB;      /* pill and bar-track tint */
  --violet-50: #EEE9F9;       /* the hero side panel */
  --lavender: #E6DCFA;        /* AI block gradient start */

  /* ---- Prism: the three brand hues. Only ever together, only as gradient. ---- */
  --peri: #91ABFF;
  --prism-purple: #AD4FFF;
  --teal: #00DECB;
  --teal-600: #00B8A9;        /* the proof dot */

  /* ---- Client side: mint only. Never mixed with violet in one block. ---- */
  --mint: #D9F1EA;
  --mint-2: #D5F3EC;          /* AI block gradient end */
  --mint-ink: #086B60;        /* eyebrow, link, avatar initials */
  --mint-muted: #3F5A55;
  --mint-line: #8CC9BE;       /* the dashed empty seat */

  /* ---- Status: one word, one color. ---- */
  --orange-500: #EF7D1A;      /* behind: bars */
  --orange-700: #B3541A;      /* behind: words */
  --peach: #FCEBDC;
  --green-500: #1F8A5B;       /* a system did it: the check circle */
  --green-700: #1F7A4F;       /* a system did it: the source word; on schedule */
  --green-100: #E4F3E9;
  --red-500: #D92D1F;         /* broken or missed. Never emphasis */
  --red-700: #A82318;
  --red-100: #F9E1DD;

  /* ---- Gradients ---- */
  --gradient-prism: linear-gradient(90deg, #91ABFF, #AD4FFF, #00DECB);
  --gradient-prism-vertical: linear-gradient(180deg, #91ABFF, #AD4FFF, #00DECB);
  --gradient-ai: linear-gradient(135deg, #E6DCFA 0%, #D5F3EC 100%);
  --gradient-pill: linear-gradient(90deg, #E6DCFA, #D5F3EC);
  --gradient-bar: linear-gradient(90deg, #91ABFF, #AD4FFF);
  --gradient-halo: linear-gradient(118deg, rgba(145,171,255,.75) 0%, rgba(173,79,255,.6) 50%, rgba(0,222,203,.7) 100%);

  /* ---- Semantic aliases ---- */
  --text-primary: var(--ink);
  --text-body: var(--ink-2);
  --text-secondary: var(--muted);
  --surface-page: var(--ground);
  --surface-card: var(--surface);
  --action: var(--violet-500);
  --action-hover: var(--violet-600);
  /* Text and icons on an action fill. White on Debut violet; a tenant's light brand color
     flips it to ink (brand-math.js textOn), so a button always reads. */
  --on-action: #FFFFFF;
  /* The action color used AS TEXT on the ground. Debut violet reads as it is; a light brand
     color is darkened until it does (brand-math.js readableOn). */
  --action-text: var(--violet-500);
  --action-ink: var(--ink);
  --action-ink-hover: #000000;
  --link: var(--violet-700);
  --focus-ring: var(--violet-500);
  --white: #FFFFFF;

  /* ---- Compatibility names still referenced by older pages ---- */
  --gradient-spectrum: var(--gradient-prism);
  --gradient-spectrum-vertical: var(--gradient-prism-vertical);
  --gradient-signal: var(--gradient-prism);
  --color-bg: var(--ground);
  /* Big things are Light; small things are Medium or SemiBold. That inversion is the voice. */
  --text-h1: 300 44px/1.08 var(--font-sans);
  --text-h2: 500 27px/1.2 var(--font-sans);          /* the card title */
  --text-h2-sm: 500 22px/1.2 var(--font-sans);       /* the compact card title */
  --text-display: 300 26px/1.15 var(--font-sans);    /* heads inside blocks */
  --text-numeral-xl: 300 72px/1 var(--font-sans);
  --text-numeral-lg: 300 50px/1 var(--font-sans);
  --text-section: 600 17px/1.3 var(--font-sans);
  --text-lede: 400 17px/1.5 var(--font-sans);
  --text-row: 500 16px/1.4 var(--font-sans);
  --text-row-sm: 500 15px/1.4 var(--font-sans);
  --text-body: 400 15px/1.5 var(--font-sans);
  --text-body-sm: 400 14.5px/1.6 var(--font-sans);
  --text-button: 600 15px/1 var(--font-sans);
  --text-button-sm: 600 14px/1 var(--font-sans);
  --text-tab: 500 14px/1.3 var(--font-sans);
  --text-support: 400 13.5px/1.5 var(--font-sans);
  --text-meta: 400 13px/1.5 var(--font-sans);
  --text-caption: 400 12.5px/1.5 var(--font-sans);
  --text-eyebrow: 600 12px/1.4 var(--font-sans);
  --text-label: 500 12px/1.3 var(--font-sans);        /* rail labels */
  --text-pill: 600 11px/1.4 var(--font-sans);         /* the one size under 12: pills, on a tint */

  --tracking-h1: -0.025em;
  --tracking-h2: -0.02em;
  --tracking-numeral-xl: -0.04em;
  --tracking-numeral-lg: -0.03em;
  --tracking-eyebrow: 0.1em;
  --tracking-table-head: 0.08em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --text-floor: 12px; /* in-app text never drops below this; pills are the exception and sit on a tint */
  --space-1: 4px;  --space-2: 6px;  --space-3: 8px;  --space-4: 10px; --space-5: 12px;
  --space-6: 14px; --space-7: 16px; --space-8: 18px; --space-9: 22px; --space-10: 24px;
  --space-11: 26px; --space-12: 30px; --space-13: 34px; --space-14: 40px; --space-15: 46px;
  --space-16: 52px; --space-17: 60px;

  /* The frame */
  --rail-w: 96px;
  --rail-tile: 46px;
  --rail-pad: 26px 0 24px;
  --main-pad: 34px 60px 52px 24px;
  --grid-gap: 52px;
  --aside-w: 352px;           /* the right column */
  --aside-w-wide: 372px;      /* when the right column carries twelve rows */
  --side-panel-w: 252px;      /* the numeral panel inside the hero card */

  /* Blocks */
  --card-pad: 32px 36px 30px;
  --block-pad: 24px 26px;
  --row-pad: 17px 6px;
  --row-pad-sm: 13px 6px;
  --table-cell-pad: 13px 22px;
  --section-gap: 40px;        /* between a section label group and the next */
  --after-header: 30px;       /* lede to tabs */
  --after-tabs: 40px;         /* tabs to content */

  /* Controls */
  --btn-h-lg: 48px;
  --btn-h: 42px;
  --touch-min: 44px;
  --touch-client: 46px;       /* anything a client taps */
  --mark: 24px;               /* the done circle */
  --avatar: 26px;
  --avatar-lg: 40px;
  --ring: 156px;
  --radius-card: 24px;        /* the hero card, AI block, client block, tables */
  --radius-tile: 16px;        /* rail tiles */
  --radius-button: 12px;      /* buttons, the toggle track */
  --radius-toggle-opt: 9px;
  --radius-row: 8px;          /* list-row hover tint */
  --radius-row-lg: 10px;
  --radius-chip: 7px;         /* client initials chips */
  --radius-pill: 999px;
  --radius-circle: 50%;

  --hairline-w: 1px;
  --outline-w: 1.5px;         /* the empty circle */
  --underline-w: 2px;         /* active tab */
  --prism-w: 3px;             /* the AI edge */
  --prism-wrap: 26px;         /* how far the edge curls around the corners */
  --bar-h: 5px;
  --bar-h-lg: 8px;
  --ring-stroke: 8;           /* SVG units on a 120 viewBox */
  /* Shadow is warm and only where a surface lifts off the ground. */
  --shadow-hairline: 0 1px 2px rgba(70,50,30,0.06);
  --shadow-card: 0 1px 2px rgba(70,50,30,0.06), 0 24px 60px -28px rgba(60,30,120,0.35);
  --shadow-card-hover: 0 2px 4px rgba(70,50,30,0.06), 0 30px 70px -28px rgba(60,30,120,0.45);
  --shadow-table: 0 1px 2px rgba(70,50,30,0.06), 0 18px 50px -30px rgba(70,50,30,0.25);

  /* The halo behind the one card */
  --halo-blur: 26px;
  --halo-opacity: 0.75;
  --halo-inset: 10px -16px -18px -16px;

  /* The page-load sequence: one orchestrated reveal, staggered by --d (ms) */
  --reveal-dur: 700ms;
  --reveal-ease: cubic-bezier(.2,.7,.2,1);
  --reveal-step: 35ms;

  /* Motion: short, eased, never bouncy */
  --dur-fast: 150ms;
  --dur-lift: 180ms;
  --dur-press: 100ms;
  --ease: ease;
  --lift: translateY(-2px);
  --press: scale(0.97);
  --transition-tint: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}