/* ============================================================
   FONTS — webfont declarations
   Manrope (display + body), Syncopate / Space Grotesk / Rajdhani (TwinX),
   plus system serif (formula) and system mono (technical readouts).
   Loaded from Google Fonts; @font-face rules live in the imported sheets.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Syncopate:wght@400;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

/* ============================================================
   LAYER 0 — PRIMITIVES  (raw values; never used directly in UI)
   Source of truth: Design-code-files/tokens.css
   ============================================================ */
:root {
  /* Neutrals — Seldon CI */
  --p-seldon-dark:        #060912;
  --p-seldon-light:       #F4F3EF;
  --p-gray-dark:          #404040;
  --p-gray-mid:           #555555;
  --p-gray-light:         #AAAAAA;
  --p-white:              #FFFFFF;
  --p-black:              #000000;

  /* Seldon Blue ramp (CI) */
  --p-blue-600:           #2233CC;   /* strong  */
  --p-blue-500:           #4455FF;   /* base — "Seldon Blue" */
  --p-blue-400:           #5B6EFF;
  --p-blue-300:           #7B9FFF;
  --p-blue-200:           #9FA9FF;
  --p-blue-100:           #B0BAFF;
  --p-blue-tint:          #E8F4FF;
  --p-navy:               #0C1E3C;

  /* Protocol (TwinX) accents */
  --p-charcoal:           #151517;
  --p-charcoal-deep:      #0A0A0C;
  --p-charcoal-mid:       #2A2A2D;
  --p-gold:               #FFB800;
  --p-cyan:               #00D4FF;
  --p-cyan-bright:        #00F0FF;

  /* Status / semantic (light → dark variants applied in their layers) */
  --p-ok-l:   #1B5E20;  --p-ok-d:   #66BB6A;
  --p-warn-l: #E65100;  --p-warn-d: #FFB74D;
  --p-bad-l:  #B71C1C;  --p-bad-d:  #EF5350;
  --p-coral:  #E8443A;

  /* Type families */
  --p-font-manrope:      'Manrope', sans-serif;
  --p-font-mono:         ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --p-font-formula:      "Times New Roman", Georgia, serif;
  --p-font-syncopate:    'Syncopate', sans-serif;
  --p-font-space-grotesk:'Space Grotesk', sans-serif;
  --p-font-rajdhani:     'Rajdhani', sans-serif;

  /* Spacing scale (4px base) */
  --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;
  --space-10: 128px;
}

/* ============================================================
   LAYER 1 — SEMANTIC BASE
   :root = Seldon Trevize · Institutional · light
   These are the names UI consumes (never raw hex/primitives).
   ============================================================ */
:root {
  --bg-color:        var(--p-seldon-light);
  --text-main:       var(--p-seldon-dark);
  --text-muted:      var(--p-gray-dark);

  --accent:          var(--p-blue-500);
  --accent-strong:   var(--p-blue-600);
  --accent-soft:     rgba(68, 85, 255, 0.09);
  --accent-border:   rgba(68, 85, 255, 0.24);
  --accent-text:     var(--p-white);
  --accent-2:        transparent;   /* no second accent in Institutional */

  --card-bg:         rgba(244, 243, 239, 0.76);
  --card-border:     rgba(6, 9, 18, 0.10);
  --card-shadow:     0 20px 40px rgba(0, 0, 0, 0.05);
  --glass-blur:      20px;
  --radius-card:     24px;
  --radius-control:  999px;   /* pill buttons */

  --shader-bg:       #F4F3EF;
  --shader-fg:       #DCD8CB;

  --status-ok:       var(--p-ok-l);
  --status-warn:     var(--p-warn-l);
  --status-bad:      var(--p-bad-l);
  --fin-up:          var(--status-ok);   /* @kind color */
  --fin-flat:        var(--text-muted);  /* @kind color */
  --fin-down:        var(--status-bad);  /* @kind color */

  /* Typography roles (shared; families swap per mode) */
  --font-sans:       var(--p-font-manrope);
  --font-display:    var(--p-font-manrope);
  --font-mono:       var(--p-font-mono);
  --font-formula:    var(--p-font-formula);

  /* Type scale (Manrope display / body) */
  --fs-display-xl:   clamp(56px, 7vw, 104px); /* @kind font */
  --fs-display-lg:   clamp(40px, 5vw, 64px);  /* @kind font */
  --fs-heading:      clamp(28px, 3.2vw, 44px); /* @kind font */
  --fs-subheading:   24px; /* @kind font */
  --fs-body-lg:      19px; /* @kind font */
  --fs-body:         16px; /* @kind font */
  --fs-small:        14px; /* @kind font */
  --fs-label:        11px; /* @kind font */

  --weight-display:  800; /* @kind font */
  --weight-wordmark-primary:   800;  /* SELDON · @kind font */
  --weight-wordmark-secondary: 300;  /* Trevize muted · @kind font */
  --tracking-display:  -1.5px; /* @kind font */
  --tracking-wordmark: -2px; /* @kind font */
  --tracking-label:    3px; /* @kind font */
  --leading-body:      1.85; /* @kind font */

  --transition-theme:  1.2s ease; /* @kind other */
  --ease-brand:        cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */

  --fx-glow:           0; /* @kind other */
  --fx-scanline:       0; /* @kind other */
}

/* ============================================================
   STATE + MODE OVERRIDES  (each value is a delta from the Seldon base)
   States: [data-theme="dark"] · [data-monochrome="on"] (+ combo)
   Modes:  [data-brand="twinx"] (Protocol) · [data-brand="dapp"] (Transactional)
   ============================================================ */

/* --- State: dark --- */
[data-theme="dark"] {
  --bg-color:        var(--p-seldon-dark);
  --text-main:       var(--p-seldon-light);
  --text-muted:      var(--p-gray-light);
  --card-bg:         rgba(6, 9, 18, 0.74);
  --card-border:     rgba(244, 243, 239, 0.10);
  --card-shadow:     0 20px 40px rgba(0, 0, 0, 0.60);
  --shader-bg:       #060912;
  --shader-fg:       #151A28;
  --status-ok:       var(--p-ok-d);
  --status-warn:     var(--p-warn-d);
  --status-bad:      var(--p-bad-d);
}

/* --- State: monochrome (blue removed; strict grayscale) --- */
html[data-monochrome="on"] {
  --bg-color:        #EDEDED;
  --text-main:       #101010;
  --text-muted:      #5A5A5A;
  --accent:          #4A4A4A;
  --accent-strong:   #1F1F1F;
  --accent-soft:     rgba(74, 74, 74, 0.10);
  --accent-border:   rgba(74, 74, 74, 0.24);
  --accent-text:     #FFFFFF;
  --card-bg:         rgba(237, 237, 237, 0.86);
  --card-border:     rgba(0, 0, 0, 0.14);
  --shader-bg:       #E6E6E6;
  --shader-fg:       #9E9E9E;
}
html[data-monochrome="on"][data-theme="dark"] {
  --bg-color:        #101010;
  --text-main:       #ECECEC;
  --text-muted:      #9A9A9A;
  --accent:          #D4D4D4;
  --accent-strong:   #F2F2F2;
  --accent-text:     #101010;
  --card-bg:         rgba(16, 16, 16, 0.84);
  --card-border:     rgba(255, 255, 255, 0.12);
  --shader-bg:       #0C0C0C;
  --shader-fg:       #3A3A3A;
}

/* ============================================================
   MODE: TwinX (Protocol) — hex/rgba
   Charcoal + dual neon, terminal type, effects ON. Dark-native.
   ============================================================ */
[data-brand="twinx"] {
  --bg-color:        var(--p-charcoal);
  --text-main:       #F2F4F6;
  --text-muted:      #8A8F98;

  /* Dual neon: cyan = interactive/active, gold = emphasis/highlight */
  --accent:          var(--p-cyan);
  --accent-strong:   var(--p-cyan-bright);
  --accent-soft:     rgba(0, 212, 255, 0.10);
  --accent-border:   rgba(0, 212, 255, 0.35);
  --accent-text:     var(--p-charcoal-deep);
  --accent-2:        var(--p-gold);
  --accent-2-soft:   rgba(255, 184, 0, 0.12);

  --card-bg:         rgba(10, 10, 12, 0.72);
  --card-border:     rgba(255, 255, 255, 0.10);
  --card-shadow:     0 0 30px rgba(0, 212, 255, 0.12);
  --radius-card:     16px;

  --shader-bg:       #0A0A0C;
  --shader-fg:       #151517;

  --font-display:    var(--p-font-syncopate);
  --font-sans:       var(--p-font-space-grotesk);
  --font-ui:         var(--p-font-rajdhani);
  --font-mono:       var(--p-font-mono);

  --fx-glow:         1; /* @kind other */
  --fx-scanline:     1; /* @kind other */
}

/* ============================================================
   MODE: Dapp (Transactional) — shadcn / HSL CHANNELS
   Chassis defaults = the shared Seldon system, expressed as HSL channels
   so shadcn hsl(var(--x)), the color chooser, and the per-client
   shade-generation algorithm stay native. App uses .dark for dark mode.
   ============================================================ */
[data-brand="dapp"] {
  /* App ergonomics */
  --radius:          8px;
  --radius-card:     8px;
  --radius-control:  8px;
  --glass-blur:      14px;
  --font-display:    var(--font-sans);
  --fx-glow:         0; /* @kind other */
  --fx-scanline:     0; /* @kind other */

  /* ---- Per-client theming contract — colors.css overrides ONLY these ----
     HSL CHANNELS so the shade algorithm consumes them directly.            */
  --client-accent:        235 100% 63%;   /* @kind color */
  --client-accent-text:     0   0% 100%;  /* @kind color */
  --client-logo-url:      url('../assets/logos/mark-dark.svg'); /* @kind other */
  --client-bg-image-url:  none; /* @kind other */

  /* ---- shadcn tokens (HSL channels; consume as hsl(var(--x))) ----
     Chassis = Seldon light; dark cascade overrides below.           */
  --background:             48 19% 95%;    /* @kind color */
  --foreground:            225 50%  5%;    /* @kind color */
  --card:                   48 19% 95%;    /* @kind color */
  --card-foreground:       225 50%  5%;    /* @kind color */
  --popover:                48 19% 95%;    /* @kind color */
  --popover-foreground:    225 50%  5%;    /* @kind color */
  --primary:               var(--client-accent);      /* @kind color */
  --primary-foreground:    var(--client-accent-text); /* @kind color */
  --secondary:              48 19% 90%;    /* @kind color */
  --secondary-foreground:  225 50%  5%;    /* @kind color */
  --muted:                  48 10% 88%;    /* @kind color */
  --muted-foreground:        0  0% 25%;    /* @kind color */
  --accent:                var(--client-accent);       /* @kind color */
  --accent-foreground:     var(--client-accent-text);  /* @kind color */
  --border:                 48 12% 85%;    /* @kind color */
  --input:                  48 12% 85%;    /* @kind color */
  --ring:                  var(--client-accent);  /* @kind color */
  --destructive:             0 73% 41%;    /* @kind color */
  --destructive-foreground:  0  0% 100%;   /* @kind color */
  --success:               124 55% 24%;    /* @kind color */
  --warning:                21 100% 45%;   /* @kind color */

  /* Financial semantics (custom; HSL channels) */
  --fin-up:                124 55% 24%;  /* @kind color */
  --fin-flat:                0  0% 25%;  /* @kind color */
  --fin-down:                0 73% 41%;  /* @kind color */

  /* Hooks the app already references */
  --brand-color:           var(--client-accent);    /* @kind color */
  --logo-url:              var(--client-logo-url);   /* @kind other */
  --main-bg-image-url:     var(--client-bg-image-url); /* @kind other */
}

/* Dapp dark cascade (app toggles .dark; [data-theme] also supported) */
[data-brand="dapp"].dark,
[data-brand="dapp"][data-theme="dark"] {
  --background:            225 50%  5%;     /* @kind color */
  --foreground:            225 19% 95%;     /* @kind color */
  --card:                  225 40%  8%;     /* @kind color */
  --card-foreground:       225 19% 95%;     /* @kind color */
  --popover:               225 40%  8%;     /* @kind color */
  --popover-foreground:    225 19% 95%;     /* @kind color */
  --secondary:             225 30% 12%;     /* @kind color */
  --secondary-foreground:  225 19% 95%;     /* @kind color */
  --muted:                 225 20% 16%;     /* @kind color */
  --muted-foreground:        0  0% 67%;     /* @kind color */
  --border:                225 20% 18%;     /* @kind color */
  --input:                 225 20% 18%;     /* @kind color */
  --destructive:             1 83% 63%;     /* @kind color */
  --success:               123 38% 57%;     /* @kind color */
  --warning:                36 100% 65%;    /* @kind color */
  --fin-up:                123 38% 57%;     /* @kind color */
  --fin-down:                1 83% 63%;     /* @kind color */
}

/* ============================================================
   BRAND-MODE MONOCHROME OVERRIDES
   The base [data-monochrome] scopes only touch the marketing hex tokens,
   so brand modes never went grayscale. These (more specific) selectors
   carry the grayscale into TwinX and Dapp. Keep them after the base scopes.
   Values are canonical (tokens.css) — verbatim, do not re-derive.
   ============================================================ */

/* TwinX — monochrome (dark-native, regardless of theme toggle) */
[data-brand="twinx"][data-monochrome="on"],
[data-brand="twinx"][data-monochrome="on"][data-theme="dark"] {
  --bg-color:#141416; /* @kind color */ --text-main:#ECECEC; /* @kind color */ --text-muted:#9A9A9A; /* @kind color */
  --accent:#D4D4D4; /* @kind color */ --accent-strong:#F2F2F2; /* @kind color */
  --accent-soft:rgba(212,212,212,.08); /* @kind color */ --accent-border:rgba(212,212,212,.22); /* @kind color */
  --accent-text:#141416; /* @kind color */ --accent-2:#888888; /* @kind color */ --accent-2-soft:rgba(136,136,136,.12); /* @kind color */
  --card-bg:rgba(16,16,16,.84); /* @kind color */ --card-border:rgba(255,255,255,.12); /* @kind color */
  --card-shadow:0 20px 40px rgba(0,0,0,.5); /* @kind shadow */ --shader-bg:#0C0C0C; /* @kind color */ --shader-fg:#2A2A2A; /* @kind color */
  --fx-glow:0; /* @kind other */ --fx-scanline:0; /* @kind other */
}
/* Dapp — monochrome light (HSL channels; accent neutralized) */
[data-brand="dapp"][data-monochrome="on"] {
  --background:0 0% 93%; /* @kind color */ --foreground:0 0% 6%; /* @kind color */ --card:0 0% 93%; /* @kind color */ --card-foreground:0 0% 6%; /* @kind color */
  --popover:0 0% 93%; /* @kind color */ --popover-foreground:0 0% 6%; /* @kind color */ --secondary:0 0% 90%; /* @kind color */ --secondary-foreground:0 0% 6%; /* @kind color */
  --muted:0 0% 88%; /* @kind color */ --muted-foreground:0 0% 35%; /* @kind color */ --primary:0 0% 29%; /* @kind color */ --primary-foreground:0 0% 100%; /* @kind color */
  --accent:0 0% 29%; /* @kind color */ --accent-foreground:0 0% 100%; /* @kind color */ --border:0 0% 85%; /* @kind color */ --input:0 0% 85%; /* @kind color */
  --ring:0 0% 29%; /* @kind color */ --brand-color:0 0% 29%; /* @kind color */ --fin-up:0 0% 35%; /* @kind color */ --fin-flat:0 0% 55%; /* @kind color */ --fin-down:0 0% 12%; /* @kind color */
}
/* Dapp — monochrome dark */
[data-brand="dapp"][data-monochrome="on"].dark,
[data-brand="dapp"][data-monochrome="on"][data-theme="dark"] {
  --background:0 0% 6%; /* @kind color */ --foreground:0 0% 93%; /* @kind color */ --card:0 0% 10%; /* @kind color */ --card-foreground:0 0% 93%; /* @kind color */
  --popover:0 0% 10%; /* @kind color */ --popover-foreground:0 0% 93%; /* @kind color */ --secondary:0 0% 14%; /* @kind color */ --secondary-foreground:0 0% 93%; /* @kind color */
  --muted:0 0% 16%; /* @kind color */ --muted-foreground:0 0% 60%; /* @kind color */ --primary:0 0% 83%; /* @kind color */ --primary-foreground:0 0% 6%; /* @kind color */
  --accent:0 0% 83%; /* @kind color */ --accent-foreground:0 0% 6%; /* @kind color */ --border:0 0% 20%; /* @kind color */ --input:0 0% 20%; /* @kind color */
  --ring:0 0% 83%; /* @kind color */ --brand-color:0 0% 83%; /* @kind color */ --fin-up:0 0% 60%; /* @kind color */ --fin-flat:0 0% 45%; /* @kind color */ --fin-down:0 0% 88%; /* @kind color */
}


*{box-sizing:border-box;margin:0}
body{background:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);
  font-size:var(--fs-body);line-height:var(--leading-body);
  transition:background var(--transition-theme),color var(--transition-theme)}
main{max-width:1080px;margin:0 auto;padding:64px 24px 128px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
header.site{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:96px}
.wordmark{font-family:var(--font-display);font-size:22px;letter-spacing:var(--tracking-wordmark);color:var(--text-main)}
.wordmark b{font-weight:800}.wordmark span{font-weight:300;color:var(--text-muted)}
.kicker{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}
.kicker.accent{color:var(--accent)}
h1{font-family:var(--font-display);font-weight:800;letter-spacing:var(--tracking-display);
  font-size:var(--fs-heading);line-height:1.15;margin:16px 0 24px}
article.teaser{padding:32px 0;border-top:1px solid var(--card-border)}
article.teaser h2{font-family:var(--font-display);font-weight:800;letter-spacing:-1px;
  font-size:var(--fs-subheading);line-height:1.25;margin:10px 0 12px}
article.teaser h2 a{color:var(--text-main)}
.tools{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.tools input,.tools select{min-height:42px;padding:8px 12px;border:1px solid var(--card-border);border-radius:8px;background:var(--card-bg);color:var(--text-main)}.tools input{flex:1;min-width:220px}
.archive-heading{margin:56px 0 8px}.hidden{display:none!important}
.backdrop{opacity:.28;pointer-events:none;max-width:680px}.drawer{position:fixed;z-index:5;right:0;top:0;width:min(680px,94vw);height:100vh;overflow:auto;padding:56px clamp(24px,5vw,64px);background:var(--card-bg);border-left:1px solid var(--card-border);box-shadow:-20px 0 60px rgba(0,0,0,.18)}.drawer .close{display:inline-block;margin-bottom:28px;font-family:var(--font-mono);font-size:12px}.drawer article{max-width:620px}
time,.meta{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.body{margin-top:32px;font-size:var(--fs-body-lg)}
.body p{margin:0 0 1.4em}
img.lead,video.lead{width:100%;height:auto;display:block;border-radius:12px;margin:24px 0 8px}
footer.site{margin-top:96px;padding-top:32px;border-top:1px solid var(--card-border);
  display:flex;gap:24px;flex-wrap:wrap}
footer.site a,footer.site span{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}

/* Seldon Trevize customer newsroom theme. Theme ID: seldon-trevize. */
:root {
  --st-ink:#060912;
  --st-paper:#f4f3ef;
  --st-muted:#aaa;
  --st-accent:#7683ff;
  --st-border:rgba(244,243,239,.13);
  --st-surface:rgba(15,19,32,.88);
  --bg-color:var(--st-ink);
  --card-bg:var(--st-surface);
  --card-border:var(--st-border);
  --text-main:var(--st-paper);
  --text-muted:var(--st-muted);
  --accent:var(--st-accent);
  --font-sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}

body { background:var(--st-ink); color:var(--st-paper); font-family:var(--font-sans); }
main { max-width:1080px; }
header.site { padding-bottom:24px; border-bottom:1px solid var(--st-border); }
.wordmark { font-family:var(--font-display); font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.wordmark span { color:var(--st-muted); }
a { color:var(--st-accent); text-underline-offset:.16em; }
h1,article.teaser h2 { font-family:var(--font-display); font-weight:800; overflow-wrap:anywhere; }

article.teaser {
  margin:14px 0; padding:24px;
  background:var(--st-surface); border:1px solid var(--st-border);
  border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,.35);
}
article.teaser:first-child { border-top:1px solid var(--st-border); }
article.teaser h2 a { color:var(--st-paper); }

.tools input,.tools select {
  background:rgba(244,243,239,.06); color:var(--st-paper);
  border:1px solid var(--st-border); border-radius:999px;
  font-family:var(--font-sans);
}
.tools input::placeholder { color:var(--st-muted); }
.drawer {
  background:#0b0f1c; color:var(--st-paper); border-left:1px solid var(--st-border);
  box-shadow:-24px 0 60px rgba(0,0,0,.65);
}
.drawer img.lead { border-radius:14px; background:rgba(244,243,239,.05); }

:is(a,button,input,select,[tabindex]):focus-visible {
  outline:3px solid rgba(118,131,255,.65); outline-offset:3px;
}
@media(max-width:720px){
  main{padding:40px 18px 96px}.drawer{width:100vw;border-left:0;padding:36px 22px}.tools{display:grid}.tools input{min-width:0;width:100%}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}