/* Indisea color system: palette (base) + semantic roles.
   Brand definition: Stone #F0EDEA, Charcoal #262626, Sky Blue #23B7F6,
   Signal Yellow #EC9718, Link Green #07B146, Node Red #D92424,
   Nearly White #FAFAF9, Nearly Charcoal #363636.
   Tint/shade ramps follow the brand's "20% tint scale" rule. */
:root{
  /* ---- named brand values (canonical, never redefined) ---- */
  --indisea-stone: #F0EDEA;
  --indisea-charcoal: #262626;
  --indisea-nearly-white: #FAFAF9;
  --indisea-nearly-charcoal: #363636;
  --indisea-sky-blue: #3BBFF7;
  --indisea-signal-yellow: #EEA02B;
  --indisea-link-green: #07A240;
  --indisea-node-red: #C92121;

  /* ---- neutral ramp: stone → charcoal ---- */
  --indisea-stone-50: #FAFAF9;
  --indisea-stone-100: #F0EDEA;
  --indisea-stone-200: #E0DDDA;
  --indisea-stone-300: #D0CDCB;
  --indisea-stone-400: #AFADAB;
  --indisea-stone-500: #8B8A88;
  --indisea-stone-600: #6B6A69;
  --indisea-stone-700: #4E4E4D;
  --indisea-stone-800: #363636;
  --indisea-stone-900: #262626;
  --indisea-stone-950: #171717;

  /* ---- sky blue ---- */
  --indisea-blue-100: #D8F2FD;
  --indisea-blue-200: #B1E5FC;
  --indisea-blue-300: #89D9FA;
  --indisea-blue-400: #62CCF9;
  --indisea-blue-500: #3BBFF7;
  --indisea-blue-600: #32A2D2;
  --indisea-blue-700: #2986AD;
  --indisea-blue-800: #206988;
  --indisea-blue-900: #184C63;

  /* ---- signal yellow ---- */
  --indisea-yellow-100: #FCECD5;
  --indisea-yellow-200: #F8D9AA;
  --indisea-yellow-300: #F5C680;
  --indisea-yellow-400: #F1B355;
  --indisea-yellow-500: #EEA02B;
  --indisea-yellow-600: #CA8825;
  --indisea-yellow-700: #A7701E;
  --indisea-yellow-800: #835818;
  --indisea-yellow-900: #5F4011;

  /* ---- link green ---- */
  --indisea-green-100: #CDECD9;
  --indisea-green-200: #9CDAB3;
  --indisea-green-300: #6AC78C;
  --indisea-green-400: #39B566;
  --indisea-green-500: #07A240;
  --indisea-green-600: #068A36;
  --indisea-green-700: #05712D;
  --indisea-green-800: #045923;
  --indisea-green-900: #03411A;

  /* ---- node red ---- */
  --indisea-red-100: #F4D3D3;
  --indisea-red-200: #E9A6A6;
  --indisea-red-300: #DF7A7A;
  --indisea-red-400: #D44D4D;
  --indisea-red-500: #C92121;
  --indisea-red-600: #AB1C1C;
  --indisea-red-700: #8D1717;
  --indisea-red-800: #6F1212;
  --indisea-red-900: #500D0D;

  /* ================= SEMANTIC ROLES (light / stone canvas) ================= */
  /* surfaces */
  --surface-canvas: var(--indisea-stone-100);
  --surface-card: var(--indisea-stone-50);
  --surface-sunken: var(--indisea-stone-200);
  --surface-inverse: var(--indisea-stone-900);
  --surface-inverse-card: var(--indisea-stone-800);

  /* text */
  --text-heading: var(--indisea-stone-900);
  --text-body: var(--indisea-stone-900);
  --text-muted: var(--indisea-stone-700);
  /* faint is decorative metadata (11-12px) on canvas or card only. Never on
     --surface-sunken, where it drops to 4.0:1. */
  --text-faint: var(--indisea-stone-600);
  /* content on a solid accent. Green and red take this; blue and yellow are
     light enough that they take charcoal instead (see tokens/modes.css). */
  --text-on-accent: var(--indisea-nearly-white);
  --text-on-inverse: var(--indisea-stone-100);
  --text-link: var(--indisea-blue-800);
  --text-link-hover: var(--indisea-blue-900);

  /* SAME-ON-SAME BORDER. The one case where a resting card border is legal: a
     surface sitting on its OWN value (stone on stone, charcoal on charcoal,
     green on green), where there is no step to do the separating.

     THE DERIVATION, so no surface needs a manual decision: the border steps in
     the SAME DIRECTION AS THE SURFACE'S OWN TEXT. A surface that carries
     charcoal text takes a DARKER border; a surface that carries nearly-white
     text takes a LIGHTER one. Whatever polarity is readable on the fill is also
     the polarity that is visible as an edge on it.

     Every theme and color-mode scope defines this token, so a card inside a
     green block automatically gets a green edge. Use sparingly: prefer the
     two-step arrangement (stone canvas + nearly-white card) whenever possible. */
  --border-same-on-same: var(--indisea-stone-300);
  /* for deep modes, whose polarity flips with the canvas */
  --deep-same-on-same: rgba(250,250,249,0.28);

  /* borders: Indisea has no shadows; borders and fills carry separation */
  --border-hairline: var(--indisea-stone-300);
  --border-strong: var(--indisea-stone-900);
  --border-subtle: var(--indisea-stone-200);
  --border-inverse: var(--indisea-stone-700);
  --border-focus: var(--indisea-blue-500);

  /* PRIMARY ACTION = THE CONTRAST BUTTON. Blue is never a button fill in this
     brand. The primary pill is simply the opposite value of its background:
     charcoal on a light surface, nearly white on a dark one. Its leading icon
     is the one colored element, in Sky Blue. */
  --action-primary: var(--indisea-stone-900);
  --action-primary-hover: var(--indisea-stone-800);
  --action-primary-press: var(--indisea-stone-700);
  --action-primary-text: var(--indisea-stone-50);
  /* Sky Blue glyph is legal HERE because the pill is charcoal (7.2:1). A Sky Blue
     glyph never sits on a light surface: see the dark-theme override below. */
  --action-primary-icon: var(--indisea-sky-blue);

  /* SELECTED STATE. A selection is the contrast pill: charcoal on light, nearly
     white on dark, matching the primary button. Blue is never a fill here either.
     These reference --action-primary, so they resolve per scope automatically:
     inside a color block or dark theme they invert with it, no redefinition. */
  --selected-container: var(--action-primary);
  --selected-on-container: var(--action-primary-text);
  /* kept as aliases: several components were written against these names */
  --action-primary-container: var(--action-primary);
  --action-primary-on-container: var(--action-primary-text);

  /* secondary action = the outlined pill, so it shares the text color */
  --action-secondary: transparent;
  --action-secondary-hover: var(--indisea-stone-200);
  --action-secondary-press: var(--indisea-stone-300);
  --action-secondary-text: var(--indisea-stone-900);

  /* accent = signal yellow (terminals, endpoints, high value) */
  --accent-terminal: var(--indisea-signal-yellow);
  --accent-terminal-container: var(--indisea-yellow-100);
  --accent-terminal-on-container: var(--indisea-yellow-900);

  /* status / states */
  --status-success: var(--indisea-green-500);
  --status-success-container: var(--indisea-green-100);
  --status-success-on-container: var(--indisea-green-900);
  --status-warning: var(--indisea-yellow-500);
  --status-warning-container: var(--indisea-yellow-100);
  --status-warning-on-container: var(--indisea-yellow-900);
  --status-error: var(--indisea-red-500);
  --status-error-container: var(--indisea-red-100);
  --status-error-on-container: var(--indisea-red-900);
  --status-info: var(--indisea-blue-500);
  --status-info-container: var(--indisea-blue-100);
  --status-info-on-container: var(--indisea-blue-900);

  /* EYEBROW CHIPS. A small caps verdict label ("SOUNDS LIKE", "NOT", "CORRECT").
     Colored label TEXT on its own is not allowed: at 10-11px an accent-colored
     word is both the weakest contrast in the design and the smallest type in it,
     which is the worst possible pairing. An eyebrow is therefore a CHIP: a light
     tint fill carrying dark colored text, inverting to a dark tint with light
     colored text on a charcoal canvas.

     These reuse the status container pairs, so the tint relationship is defined
     once. Every pair clears 8:1, and because the fill and the text come from the
     same hue the chip still reads as green/yellow/red at a glance.

       good  green 900 on green 100    9.4:1
       warn  yellow 900 on yellow 100  8.2:1
       bad   red 900 on red 100       10.8:1
       info  blue 900 on blue 100      8.0:1

     THERE ARE DELIBERATELY NO --eyebrow-* TOKENS. An alias declared here, e.g.
     `--eyebrow-good-bg: var(--status-success-container)`, would be substituted at
     computed-value time on THIS element (html) and the resolved value would then
     inherit, so a descendant scope overriding --status-success-container could
     never re-resolve it: the chip would stay light inside a dark block. Same rule
     as `color: var(--text-body)` in tokens/modes.css, one level of indirection
     deeper, and the reason aliasing a themed token at :root is always a bug.
     The .indisea-eyebrow-* classes in tokens/base.css therefore reference the
     status tokens DIRECTLY, so the var() resolves on the chip itself, inside
     whatever scope encloses it. That also makes chips correct inside color
     blocks for free.

     The neutral eyebrow stays plain muted text, no chip: it is a SECTION LABEL,
     not a verdict, and chipping it would make every card look like a form. */

  /* Accents AS TYPE. Colored type resolves PER CANVAS, in two size tiers split at
     36px. This is a HOUSE-STYLE rule, set deliberately by the brand owner, and it
     trades measured contrast for a consistent, vivid look at display sizes.

     LARGE tier, --accent-type-<hue>-lg, 36px and up. ONE STEP FOR ALL FOUR HUES:
     the 600 on light, the brand 500 on charcoal. Uniformity is the point, so that
     big figures across a layout read as one family and sit close to the brand
     value, rather than each hue landing on a different step.

       hue      light 600            charcoal 500
       blue     #32A2D2  2.49  **    #3BBFF7  7.19
       green    #068A36  3.83        #07A240  4.50
       yellow   #CA8825  2.55  **    #EEA02B  6.99
       red      #AB1C1C  6.18        #C92121  2.68  **

     ** BELOW THE 3:1 LARGE-TEXT BAR. Three of the eight pairings do not meet
     WCAG AA for large text: Sky Blue and Signal Yellow on light, and Node Red on
     charcoal. They are shipped knowingly for visual consistency. Consequences to
     respect, since they are what keep this defensible:
       - Decorative and brand-expressive figures only. Never the sole carrier of
         information; the label beneath is always --text-muted.
       - Never a control, a link, a status message or anything a user must read to
         act. If the meaning matters, use --text-heading.
       - Node Red is the worst case on charcoal (2.68). Prefer another hue for
         large figures on a dark canvas.
     The nearest UNIFORM alternative that clears 3:1 everywhere is the 700 on light
     and the 400 on charcoal, if the bar is ever preferred over the look.

     BODY tier, --accent-type-<hue>, below 36px. The closest step that clears
     4.5:1, so all of this tier is AA for normal text. This is the tier for
     anything readable, and it is per-hue rather than uniform BECAUSE the bar is
     real here:

       hue      light canvas          charcoal canvas
       blue     800  #206988  5.24    500  #3BBFF7  7.19
       green    700  #05712D  5.29    500  #07A240  4.50
       yellow   800  #835818  5.34    500  #EEA02B  6.99
       red      500  #C92121  4.84    300  #DF7A7A  5.19

     Raw --indisea-<hue>-500 stays for FILLS, strokes, dots and diagram paths,
     where the 3:1 non-text bar applies. */
  --accent-type-blue-lg: var(--indisea-blue-600);
  --accent-type-green-lg: var(--indisea-green-600);
  --accent-type-yellow-lg: var(--indisea-yellow-600);
  --accent-type-red-lg: var(--indisea-red-600);
  --accent-type-blue: var(--indisea-blue-800);
  --accent-type-green: var(--indisea-green-700);
  --accent-type-yellow: var(--indisea-yellow-800);
  --accent-type-red: var(--indisea-node-red);
  /* the boundary between the two tiers */
  --accent-type-lg-min-size: 36px;


  /* ---- deep color-block tokens (theme-responsive) ----
     A deep block is the copy-rich variant of a color block, and it inverts with
     the base mode so it always pops off the surrounding surface:
       light canvas -> dark fill, nearly-white content
       dark canvas  -> light tint, charcoal content
     Vivid color blocks do NOT change between modes; only these do. */
  --deep-blue-fill: var(--indisea-blue-800);
  --deep-green-fill: var(--indisea-green-700);
  --deep-yellow-fill: var(--indisea-yellow-800);
  --deep-red-fill: var(--indisea-red-700);
  --deep-content: var(--indisea-nearly-white);
  --deep-content-muted: rgba(250,250,249,0.90);
  --deep-content-faint: rgba(250,250,249,0.74);
  --deep-border-hairline: rgba(250,250,249,0.32);
  --deep-border-subtle: rgba(250,250,249,0.20);
  /* a receding card inside a deep block: a scrim of the content color, so it
     never needs a per-hue value and the text polarity never changes */
  --deep-recede-fill: rgba(250,250,249,0.10);
  --deep-pill-bg: var(--indisea-nearly-white);
  --deep-pill-text: var(--indisea-stone-900);
  /* this pill is nearly white, so the glyph is charcoal, not Sky Blue */
  --deep-pill-icon: var(--indisea-stone-900);

  /* connection-diagram pathway colors (lines, nodes, terminals) */
  --path-primary: var(--indisea-sky-blue);
  --path-terminal: var(--indisea-signal-yellow);
  --path-resolved: var(--indisea-link-green);
  --path-alert: var(--indisea-node-red);
  --path-inert: var(--indisea-stone-400);

  /* MD3-style state layers, applied as overlays on any surface */
  --state-hover-opacity: 0.08; /* @kind other */
  --state-focus-opacity: 0.10; /* @kind other */
  --state-press-opacity: 0.10; /* @kind other */
  --state-drag-opacity: 0.16; /* @kind other */
  --state-disabled-content-opacity: 0.38; /* @kind other */
  --state-disabled-container-opacity: 0.12; /* @kind other */
  --state-layer-on-light: var(--indisea-stone-900);
  --state-layer-on-dark: var(--indisea-stone-50);
}

/* ================= DARK MODE (charcoal canvas) ================= */
[data-theme="dark"]{
  /* LARGE tier on charcoal is the brand 500 for all four hues (house style).
     Node Red 500 is 2.68:1 here, below the 3:1 bar: decorative only.
     BODY tier keeps the 500 for blue, green and yellow, which already clear
     4.5:1; only Node Red lightens, to 300. */
  --accent-type-blue-lg: var(--indisea-sky-blue);
  --accent-type-green-lg: var(--indisea-link-green);
  --accent-type-yellow-lg: var(--indisea-signal-yellow);
  --accent-type-red-lg: var(--indisea-node-red);
  --accent-type-blue: var(--indisea-sky-blue);
  --accent-type-green: var(--indisea-link-green);
  --accent-type-yellow: var(--indisea-signal-yellow);
  --accent-type-red: var(--indisea-red-300);
  --surface-canvas: var(--indisea-stone-900);
  --surface-card: var(--indisea-stone-800);
  --surface-sunken: var(--indisea-stone-950);
  --surface-inverse: var(--indisea-stone-100);
  --surface-inverse-card: var(--indisea-stone-50);

  --text-heading: var(--indisea-stone-100);
  --text-body: var(--indisea-stone-100);
  --text-muted: var(--indisea-stone-400);
  --text-faint: var(--indisea-stone-500);
  --text-on-inverse: var(--indisea-stone-900);
  --text-link: var(--indisea-blue-300);
  --text-link-hover: var(--indisea-blue-200);

  --border-hairline: var(--indisea-stone-700);
  --border-strong: var(--indisea-stone-100);
  --border-subtle: var(--indisea-stone-800);
  --border-inverse: var(--indisea-stone-300);
  --border-same-on-same: var(--indisea-stone-700);
  --deep-same-on-same: rgba(38,38,38,0.24);

  /* contrast button inverts on a dark canvas */
  --action-primary: var(--indisea-stone-50);
  --action-primary-hover: var(--indisea-stone-200);
  --action-primary-press: var(--indisea-stone-300);
  --action-primary-text: var(--indisea-stone-900);
  /* the pill is nearly white on a dark canvas, so the glyph is charcoal.
     Sky Blue on nearly white is 1.8:1 and is never used for a glyph. */
  --action-primary-icon: var(--indisea-stone-900);

  --action-secondary: transparent;
  --action-secondary-hover: rgba(250,250,249,0.10);
  --action-secondary-press: rgba(250,250,249,0.16);
  --action-secondary-text: var(--indisea-stone-100);

  --accent-terminal-container: var(--indisea-yellow-900);
  --accent-terminal-on-container: var(--indisea-yellow-100);
  --status-success-container: var(--indisea-green-900);
  --status-success-on-container: var(--indisea-green-100);
  --status-warning-container: var(--indisea-yellow-900);
  --status-warning-on-container: var(--indisea-yellow-100);
  --status-error-container: var(--indisea-red-900);
  --status-error-on-container: var(--indisea-red-100);
  --status-info-container: var(--indisea-blue-900);
  --status-info-on-container: var(--indisea-blue-100);
  /* eyebrow chips need no dark override: they reference the status container
     pairs above, which already invert to a dark tint with light colored text. */

  /* deep blocks invert on a dark canvas: light tints with charcoal content.
     Node Red uses 300 rather than 400, because charcoal on Red 400 is 3.9:1. */
  --deep-blue-fill: var(--indisea-blue-400);
  --deep-green-fill: var(--indisea-green-400);
  --deep-yellow-fill: var(--indisea-yellow-400);
  --deep-red-fill: var(--indisea-red-300);
  --deep-content: var(--indisea-stone-900);
  --deep-content-muted: rgba(38,38,38,0.93);
  --deep-content-faint: rgba(38,38,38,0.78);
  --deep-border-hairline: rgba(38,38,38,0.28);
  --deep-border-subtle: rgba(38,38,38,0.16);
  --deep-recede-fill: rgba(38,38,38,0.12);
  --deep-pill-bg: var(--indisea-stone-900);
  --deep-pill-text: var(--indisea-stone-50);
  --deep-pill-icon: var(--indisea-sky-blue);
}