/* =====================================================================
   NavcorX Design Tokens — colors, typography, spacing
   ---------------------------------------------------------------------
   The NavcorX system is dual-personality:

   1. BROADSHEET (primary)  — dark warm cream paper, amber accent.
                              Used by navcorx.com (public newspaper)
                              and the internal Pit Wall / War Room.

   2. SCOREBOARD (lite)     — bright paper, navy ink, cyan accent.
                              Used for the print business card and
                              presentation-ready light-mode artifacts.

   Both share the same primitive token names so components can be
   themed by wrapping them in `.theme-broadsheet` (default) or
   `.theme-scoreboard`.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..800;1,9..144,400..700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Noto+Serif+TC:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Caveat:wght@500;600&display=swap");

/* ---------- 1. PALETTE PRIMITIVES (broadsheet, default) ------------- */
:root,
.theme-broadsheet {
  /* paper — five-step night scale */
  --nx-bg:        #0A0A0A;          /* page floor */
  --nx-bg-1:      #111111;          /* card */
  --nx-bg-2:      #181818;          /* raised card / table header */
  --nx-bg-3:      #1F1F1F;          /* chip / button face */
  --nx-rule:      #262626;          /* 1px hairline */
  --nx-rule-2:    #353535;          /* 1px hairline, stronger */

  /* ink — warm cream, never #FFF */
  --nx-ink:       #ECE6D7;          /* primary text */
  --nx-ink-2:     #BDB6A5;          /* secondary text */
  --nx-muted:     #6F6A5F;          /* tertiary / labels */
  --nx-muted-2:   #4A463E;          /* disabled / strokes */
  --nx-paper:     #F2EBDD;          /* light page (rare, for print) */

  /* accents */
  --nx-amber:     #FF9F1C;          /* PRIMARY accent — the brand */
  --nx-amber-soft:#FFB845;          /* hover / highlight */
  --nx-amber-edge:#C97A0E;           /* 1px border under amber bar */

  /* semantic data colors */
  --nx-green:     #2FBE6E;          /* PnL up, active, live */
  --nx-green-soft:#74D89F;
  --nx-red:       #E8543D;          /* PnL down, stop-loss, error */
  --nx-cyan:      #5AC8E0;          /* tertiary tag, neutral signal */
  --nx-violet:    #B388FF;          /* experimental / AI driver */
  --nx-rose:      #FF6B9D;
  --nx-lime:      #A8E063;
  --nx-blue:      #5B8FFF;
  --nx-gold:      #FFD27F;
}

/* ---------- 1b. PALETTE — scoreboard light theme -------------------- */
.theme-scoreboard {
  --nx-bg:        #F0F2F7;
  --nx-bg-1:      #FFFFFF;
  --nx-bg-2:      #F4F6FA;
  --nx-bg-3:      #E6EAF2;
  --nx-rule:      rgba(14,22,34,0.10);
  --nx-rule-2:    rgba(14,22,34,0.18);

  --nx-ink:       #0E1622;
  --nx-ink-2:     #182437;
  --nx-muted:     #6B7585;
  --nx-muted-2:   #8FA0B8;

  --nx-amber:     #5FA6FF;          /* in this theme, "amber" slot is blue */
  --nx-amber-soft:#7BB8FF;
  --nx-amber-edge:#2C7BD8;
  --nx-cyan:      #18C2D9;          /* secondary blue accent */
}

/* ---------- 2. TYPOGRAPHY PRIMITIVES -------------------------------- */
:root {
  /* Families */
  --nx-font-display:  "Fraunces", "Noto Serif TC", Georgia, serif;
  --nx-font-body:     "Inter", "Noto Serif TC", system-ui, -apple-system, sans-serif;
  --nx-font-body-tc:  "Noto Sans TC", "Inter", system-ui, sans-serif;
  --nx-font-mono:     "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  --nx-font-hand:     "Caveat", "Brush Script MT", cursive;

  /* Optical-size variations (Fraunces is variable) */
  --nx-fr-display:   "opsz" 144, "SOFT" 0;     /* masthead, hero */
  --nx-fr-headline:  "opsz" 72;                 /* H2 / section */
  --nx-fr-title:     "opsz" 32;                 /* card title, H3 */
  --nx-fr-deck:      "opsz" 24;                 /* italic deck/sub */
  --nx-fr-text:      "opsz" 18;                 /* long-form body */

  /* Type ramp — broadsheet rhythm.
     Display sizes use clamp() so they breathe on mobile. */
  --nx-fz-masthead:  clamp(48px, 9vw, 116px);   /* the wordmark */
  --nx-fz-hero:      clamp(38px, 5.4vw, 74px);  /* page hero */
  --nx-fz-h1:        clamp(40px, 6vw, 84px);
  --nx-fz-h2:        clamp(28px, 3.6vw, 44px);
  --nx-fz-h3:        22px;
  --nx-fz-h4:        19px;
  --nx-fz-deck:      19px;                       /* italic standfirst */
  --nx-fz-lede:      15.5px;                     /* opening paragraph */
  --nx-fz-body:      15px;
  --nx-fz-small:     13px;
  --nx-fz-caption:   12px;
  --nx-fz-meta:      11px;                       /* mono uppercase labels */
  --nx-fz-micro:     10px;                       /* hairline metadata */
  --nx-fz-tag:       10.5px;                     /* driver tags VL / DR */

  --nx-lh-tight:     0.92;
  --nx-lh-display:   1.0;
  --nx-lh-snug:      1.2;
  --nx-lh-body:      1.6;
  --nx-lh-prose:     1.7;

  --nx-ls-tight:     -0.025em;
  --nx-ls-display:   -0.015em;
  --nx-ls-snug:      -0.01em;
  --nx-ls-meta:      0.16em;
  --nx-ls-tag:       0.14em;
  --nx-ls-eyebrow:   0.22em;

  /* Spacing — 4px base */
  --nx-sp-1:  4px;
  --nx-sp-2:  8px;
  --nx-sp-3:  12px;
  --nx-sp-4:  16px;
  --nx-sp-5:  22px;
  --nx-sp-6:  32px;
  --nx-sp-7:  48px;
  --nx-sp-8:  64px;

  /* Radii (broadsheet is mostly square — keep small) */
  --nx-radius-0: 0;          /* default — sharp newsprint */
  --nx-radius-1: 2px;
  --nx-radius-2: 6px;        /* rare — used for soft chips only */

  /* Shadows are extremely rare on the dark theme; rules carry the weight. */
  --nx-shadow-card:   0 1px 0 0 var(--nx-rule);
  --nx-shadow-pop:    0 8px 28px rgba(0,0,0,.55);

  /* Durations */
  --nx-dur-fast:  120ms;
  --nx-dur-base:  180ms;
  --nx-dur-slow:  600ms;
  --nx-ease:      cubic-bezier(.2,.7,.2,1);
}

/* ---------- 3. SEMANTIC ELEMENT STYLES ------------------------------ */
/* Use these by adding the class to an element, OR copy the body of the
   rule into your own component CSS. They cover the most common cases
   so a designer can drop a card together without re-deriving values. */

/* Masthead wordmark (only used once per page, top centered) */
.nx-masthead {
  font-family: var(--nx-font-display);
  font-variation-settings: var(--nx-fr-display);
  font-weight: 700;
  font-size: var(--nx-fz-masthead);
  line-height: var(--nx-lh-tight);
  letter-spacing: var(--nx-ls-tight);
  color: var(--nx-ink);
  text-align: center;
}
.nx-masthead .x { color: var(--nx-amber); font-style: italic; font-weight: 600; }

/* Hero / page H1 */
.nx-h1 {
  font-family: var(--nx-font-display);
  font-variation-settings: var(--nx-fr-display);
  font-weight: 700;
  font-size: var(--nx-fz-h1);
  line-height: 0.95;
  letter-spacing: var(--nx-ls-tight);
  color: var(--nx-ink);
}
.nx-h1 em { font-style: italic; color: var(--nx-amber); font-weight: 500; }

/* Section H2 */
.nx-h2 {
  font-family: var(--nx-font-display);
  font-variation-settings: var(--nx-fr-headline);
  font-weight: 700;
  font-size: var(--nx-fz-h2);
  line-height: var(--nx-lh-display);
  letter-spacing: var(--nx-ls-display);
  color: var(--nx-ink);
}
.nx-h2 em { font-style: italic; color: var(--nx-amber); font-weight: 500; }

/* Card / article title H3 */
.nx-h3 {
  font-family: var(--nx-font-display);
  font-variation-settings: var(--nx-fr-title);
  font-weight: 600;
  font-size: var(--nx-fz-h3);
  line-height: 1.15;
  letter-spacing: var(--nx-ls-snug);
  color: var(--nx-ink);
}

/* Italic "deck" / standfirst — always Fraunces italic */
.nx-deck {
  font-family: var(--nx-font-display);
  font-variation-settings: var(--nx-fr-deck);
  font-style: italic;
  font-size: var(--nx-fz-deck);
  line-height: 1.45;
  color: var(--nx-ink-2);
}

/* Body paragraph — Inter for product UI, Fraunces for long-form essays */
.nx-body  { font-family: var(--nx-font-body); font-size: var(--nx-fz-body);  line-height: var(--nx-lh-body); color: var(--nx-ink); }
.nx-lede  { font-family: var(--nx-font-body); font-size: var(--nx-fz-lede);  line-height: var(--nx-lh-prose); color: var(--nx-ink); }
.nx-prose { font-family: var(--nx-font-display); font-size: 17px; line-height: var(--nx-lh-prose); color: var(--nx-ink); }
.nx-prose strong { color: var(--nx-amber); font-weight: 600; }

/* Eyebrow / kicker — mono ALLCAPS in amber */
.nx-eyebrow {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fz-meta);
  color: var(--nx-amber);
  letter-spacing: var(--nx-ls-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
}

/* Metadata label — mono ALLCAPS in muted gray */
.nx-meta {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fz-micro);
  color: var(--nx-muted);
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
}

/* Tabular numeric — for PnL, prices, percents */
.nx-num {
  font-family: var(--nx-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Pull-quote */
.nx-pullquote {
  font-family: var(--nx-font-display);
  font-variation-settings: var(--nx-fr-headline);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--nx-ink);
  border-left: 3px solid var(--nx-amber);
  padding: 8px 0 8px 28px;
}
.nx-pullquote em { font-style: italic; color: var(--nx-amber); }

/* The "amber pill" — small ALLCAPS chip used as a category stamp */
.nx-pill {
  display: inline-block;
  background: var(--nx-amber);
  color: black;
  padding: 2px 8px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fz-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Driver tag — bold 2-letter mono chip used everywhere (VL, DR, NX...) */
.nx-tag {
  display: inline-block;
  background: var(--nx-bg-3);
  color: var(--nx-ink);
  border: 1px solid var(--nx-rule-2);
  padding: 2px 7px;
  font-family: var(--nx-font-mono);
  font-weight: 700;
  font-size: var(--nx-fz-tag);
  letter-spacing: 0.05em;
}
.nx-tag--lead { background: var(--nx-amber); color: black; border-color: var(--nx-amber); }

/* "Live" dot — pulses */
.nx-live::before {
  content: "●";
  color: var(--nx-green);
  margin-right: 6px;
  animation: nx-pulse 1.6s infinite;
}
@keyframes nx-pulse { 50% { opacity: 0.35; } }

/* Hairline newsprint divider */
.nx-rule         { border: 0; border-top: 1px solid var(--nx-rule); }
.nx-rule--double { border: 0; border-top: 3px double var(--nx-rule-2); }
.nx-rule--amber  { border: 0; border-top: 3px double var(--nx-amber); }
.nx-rule--dashed { border: 0; border-top: 1px dashed var(--nx-rule-2); }