/* ============================================================
   atp-ai — tokens
   ------------------------------------------------------------
   The fintech redesign palette, mapped onto the token names the
   theme already uses. Nothing downstream is rewritten: ~14,900
   lines of component CSS read these variables, so the whole
   surface follows from this file.

   Source of every value below: the design preview at
   fintech-redesign-13.preview.emergentagent.com — its own
   :root / .dark custom properties, its Tailwind theme layer and
   the computed styles of its components. Where that design has
   no equivalent for a token this theme needs (marketing display
   sizes, the tertiary greys, the pastel report cards), the value
   is DERIVED from its palette and the comment says so, rather
   than being carried over from the previous rev-10 palette.

   Two departures from the source, both deliberate:
     - Inter and JetBrains Mono are LOADED here (the source ships
       them as @fontsource packages; this theme has no bundler
       for font files, so they come from Google Fonts like Poppins
       did before).
     - The pastels (--mint/--lilac/--peach) are re-tinted towards
       the new indigo/violet/emerald family. Leaving rev-10's
       blue-grey pastels under an indigo brand read as dirty.

   The rev-10 palette (Poppins, #7095E5 blue) is in git history if
   a comparison is wanted.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@400..700&display=swap');

:root {
  /* Tell the UA to render native chrome (checkboxes, radios, native <select> popups,
     date/time pickers, scrollbars, spinners) in the ACTIVE mode. Explicit per-mode
     values keep the site theme (html.dark class) authoritative over the OS preference. */
  color-scheme: light;

  /* ---- typography ----
     Inter for everything; JetBrains Mono for figures only. The source draws a hard
     line between the two: every price, P&L, SID, quantity and timestamp is mono with
     tabular figures (its `.num` utility), everything else is Inter. */
  --font-sans:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:   var(--font-sans);   /* one family throughout */

  /* The source runs a compact UI scale: 11.5px table heads, 12px card labels,
     13–13.5px body and rows, 22px page title, 30px card figures. */
  --fs-micro:    0.719rem;   /* 11.5px — table head, secondary row line */
  --fs-eyebrow:  0.75rem;    /* 12px — uppercase card label */
  --fs-body:     0.844rem;   /* 13.5px — body, nav, table cell */
  --fs-lead:     1rem;       /* 16px */
  --fs-h4:       1rem;       /* 16px — panel title */
  --fs-h3:       1.375rem;   /* 22px — page title */
  --fs-h2:       1.875rem;   /* 30px */
  --fs-display:  clamp(2.25rem, 5vw, 3.5rem);        /* derived: source has no marketing display */
  --fs-numeric:  clamp(1.5rem, 3vw, 1.875rem);       /* 24 → 30px card figure */

  --lh-display: 1.05;
  --lh-tight:   1.15;
  --lh-body:    1.55;

  --tracking-eyebrow: 0.08em;   /* uppercase card labels */
  --tracking-display: -0.02em;  /* page title */
  --tracking-mono:    -0.01em;  /* the source's `.num` */

  /* ---- color (light) ---- */
  --paper:        #FAFAFB;   /* --background: page ground */
  --paper-2:      #F2F2F5;   /* --muted: shaded table head, soft bands, chip rail */
  --paper-3:      #EEEDFD;   /* --accent: nav active, icon chips, soft buttons */
  --surface:      #FFFFFF;   /* --card: card / panel */
  --ink:          #0B0B10;   /* --foreground: primary text */
  --ink-soft:     #3F3F4E;   /* derived: between foreground and muted-foreground */
  --slate:        #6B6B7B;   /* --muted-foreground: labels, helper text */
  --slate-soft:   #8A8A99;   /* derived: tertiary — creator line, tags */
  --rule:         #E5E7EB;   /* --border */
  --rule-strong:  #DCDEE5;   /* derived: card border, one step up from --border */
  --rule-grid:    rgba(11, 11, 16, 0.06);   /* --hairline: table row divider */

  --signal:       #4F46E5;   /* --brand / --primary — THE color: tints, borders, active tab */
  --signal-soft:  #4338CA;   /* derived one step darker: links, active nav text, glyphs */

  /* The FILL of a primary button, and the label on it. White on #4F46E5 measures
     6.9:1, so unlike rev-10 the fill needs no darker substitute. Dark mode inverts
     nothing either: the source keeps a white label on its lighter indigo (4.6:1). */
  --signal-fill:  #4F46E5;
  --signal-on:    #FFFFFF;
  --signal-tint:  #EEEDFD;   /* --accent: nav/row/menu hover, soft buttons */
  --signal-tint-strong: #E2E0FB;   /* the tint under a pointer */

  --cr-cool:      #4F46E5;
  --cr-cool-soft: #7C3AED;   /* --brand-2: the far end of the brand gradient */

  /* The source paints gains in #059669, which measures 3.77:1 on white — under the
     4.5:1 a 13.5px P&L figure needs, and P&L is the most-read text on the dashboard.
     So the TEXT green is one step darker (4.76:1) and the source's own green is kept
     for the live dot, where contrast rules don't apply. Losses (#DC2626) clear at
     4.83:1 as given and are unchanged. */
  --positive:     #047857;
  --positive-soft:#ECFDF5;
  --status-live:  #059669;   /* .status:before dot — the source's --up */
  --negative:     #DC2626;   /* --down / --destructive */
  --negative-soft:#FEF2F2;
  --info:         #4F46E5;

  /* pastels — report cards, summary cards. Derived: re-tinted to the new family. */
  --mint:         #F0FDF9;
  --lilac:        #F5F3FF;
  --peach:        #FFF7ED;

  --field:        #FFFFFF;
  /* The source's three elevations: a hairline lift on every card, a soft lift on
     hover, and a brand-tinted glow reserved for the one card that carries P&L. */
  --shadow-sm:    0 1px 2px rgba(11, 11, 16, 0.04);
  --shadow-md:    0 4px 16px rgba(11, 11, 16, 0.06);
  --shadow-lg:    0 16px 40px rgba(11, 11, 16, 0.12);

  /* ---- structure ---- */
  /* --radius: 0.75rem in the source; sm/lg are its rounded-lg and rounded-2xl. */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-tag: 6px;
  --radius-pill: 999px;
  --hairline:   1px solid var(--rule);
  --hairline-strong: 1px solid var(--rule-strong);

  --container-max: 1440px;                  /* the source's max-w-[1440px] */
  --gutter:        clamp(20px, 4vw, 32px);  /* px-5 → lg:px-8 */
  --section-pad:   clamp(56px, 8vw, 112px); /* derived: guest/marketing pages only */

  /* signal dot grid — used as section background */
  --dot-color:  rgba(11, 11, 16, 0.06);
  --dot-size:   18px;
}

html.dark {
  color-scheme: dark;   /* dark native chrome (checkboxes, scrollbars, native selects, pickers) */

  /* ---- color (dark) ----
     Unlike rev-10's four-rule night mock, the source ships a complete `.dark`
     token set, so these are its values rather than derivations. Only the three
     tokens it has no name for (--ink-soft, --slate-soft, the pastels) are derived. */
  --paper:        #0A0A0F;
  --paper-2:      #1A1A24;
  --paper-3:      #1E1B39;
  --surface:      #12121A;
  --ink:          #EDEDF2;
  --ink-soft:     #C7C7D4;   /* derived */
  --slate:        #8B8B9E;
  --slate-soft:   #6F6F82;   /* derived */
  --rule:         #1F1F2A;
  --rule-strong:  #2A2A38;   /* derived: one step up, for card edges on #12121A */
  --rule-grid:    rgba(237, 237, 242, 0.06);

  --signal:       #6366F1;
  --signal-soft:  #A5B4FC;   /* --accent-foreground: the link / active-nav colour on dark */
  /* White on the source's #6366F1 measures 4.47:1 — a hair under 4.5:1 for a 13px
     button label. The fill (and only the fill) drops one step to clear it; borders,
     tints and active tabs still read --signal. */
  --signal-fill:  #5B54E8;
  --signal-on:    #FFFFFF;
  --signal-tint:  #1E1B39;
  --signal-tint-strong: #272253;

  --cr-cool:      #6366F1;
  --cr-cool-soft: #8B5CF6;

  --positive:     #10B981;
  --positive-soft:rgba(16, 185, 129, 0.16);
  --status-live:  #10B981;
  --negative:     #F05252;
  --negative-soft:rgba(240, 82, 82, 0.16);
  --info:         #6366F1;

  --mint:         #0C2B22;   /* derived */
  --lilac:        #1E1B39;   /* derived: the source's own dark accent */
  --peach:        #2B2118;   /* derived */

  --field:        #1A1A24;
  --dot-color:    rgba(237, 237, 242, 0.06);
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.6);
}