/* ============================================================
   CT Partner Portal — design tokens
   Three themes, one markup. Default = "swiss" (approved direction,
   2026-06-11 design shotgun: bright editorial, grotesk type, hairline
   grid, zero cards, single orange accent — designer C pick).
   [data-theme="concierge"] = navy/emerald/gold private-banking alt.
   [data-theme="ct-blue"]   = current-app continuity skin.
   Devs: port these variables; all components read tokens only.
   NOTE for designer: font family + accent are intentionally one-line
   swaps below (--font-display/--font-body, --acc/--acc-text).
   ============================================================ */

:root {
  /* type — designer may swap families; scale is locked */
  --font-display: "Archivo Expanded", "Archivo", -apple-system, sans-serif;
  --font-body: "Archivo", -apple-system, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;

  /* type scale — whole-pixel ladder, no off-scale sizes */
  --text-2xs: 10px;   /* dev tags only */
  --text-xs: 11px;    /* kickers, uppercase labels */
  --text-sm: 12px;    /* footnotes, timestamps */
  --text-md: 13px;    /* secondary UI, chips, buttons-sm */
  --text-ui: 14px;    /* buttons, table cells, dense UI */
  --text-base: 15px;  /* body */
  --text-lg: 17px;    /* card headings */
  --text-xl: 21px;    /* cell figures */
  --text-2xl: 27px;   /* page titles, stat figures */
  --text-3xl: 34px;   /* welcome hero */
  --text-hero: 76px;  /* the earnings figure (swiss editorial scale) */

  /* spacing scale — 4px grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* palette — swiss */
  --navy: #111418;            /* structural ink: nav, buttons */
  --navy-2: #1b2026;
  --navy-3: #2a323b;
  --ink: #111418;
  --ink-soft: #5c636b;
  --ink-faint: #646c75;       /* AA for small text on bg */

  --money: #14613f;           /* money values — identity rule: emerald = money */
  --money-deep: #0f4d32;
  --money-tint: #e3efe7;

  --gild: #e8540c;            /* accent slot = burnt orange (decoration, peaks, active) */
  --gild-text: #b03a05;       /* accent for TEXT on light — WCAG AA */
  --gild-soft: #f07b42;
  --gild-tint: #fbe9df;

  --bg: #fafaf7;
  --surface: #fafaf7;         /* swiss: surfaces don't separate from bg */
  --surface-2: #f1f1ec;
  --line: #c9ccc6;
  --line-soft: #dddfd9;

  /* on-dark (nav, primary buttons) */
  --on-dark: #fafaf7;
  --on-dark-soft: rgba(250, 250, 247, 0.72);
  --on-dark-faint: rgba(250, 250, 247, 0.56);
  --dark-line: rgba(250, 250, 247, 0.16);

  /* status — text-stage colors (AA on bg) */
  --st-referred-bg: transparent; --st-referred-fg: #646c75;
  --st-signed-bg: transparent;   --st-signed-fg: #2f5d8e;
  --st-docs-bg: transparent;     --st-docs-fg: #8a5a14;
  --st-activated-bg: transparent;--st-activated-fg: #186078;
  --st-trading-bg: transparent;  --st-trading-fg: var(--gild-text);
  --warn: #b03a05;
  --warn-tint: #fbe9df;

  /* structure — swiss is flat, squared, rule-driven */
  --radius: 0px;
  --radius-sm: 0px;
  --shadow-card: none;
  --shadow-pop: 0 16px 44px -12px rgba(17, 20, 24, 0.25);
  --card-bg: transparent;
  --card-border: 0px solid transparent;
  --card-rule: 1px solid var(--ink);      /* top rule replaces the card box */
  --chip-pad: 0;
  --chip-case: uppercase;
  --chip-ls: 0.14em;
  --chip-dot: none;

  /* hero/masthead */
  --hero-bg: transparent;
  --hero-fg: var(--ink);
  --hero-fg-soft: var(--ink-soft);
  --hero-fg-faint: var(--ink-faint);
  --hero-cell-bg: transparent;
  --hero-cell-line: var(--line);
  --hero-kicker: var(--ink-faint);
  --hero-accent: var(--gild-text);
  --hero-rule: 2px solid var(--ink);
  --hero-hairline: none;

  /* nav chrome */
  --nav-bg: var(--bg);
  --nav-fg: var(--ink);
  --nav-fg-soft: var(--ink-soft);
  --nav-line: 1px solid var(--ink);
  --nav-active-bg: transparent;
  --nav-active-line: var(--gild);

  /* charts */
  --bar: var(--ink);
  --bar-peak: var(--gild);

  /* structural details */
  --hero-shadow: none;
  --hero-pad: 36px 0 30px;
  --delta-bg: transparent;
  --delta-fg: var(--gild-text);
  --delta-pad: 0;
  --chip-fs: 11px;
  --card-pad-x: 0px;
  --field-bg: #ffffff;
  --pop-bg: #ffffff;
  --ico-bg: transparent;
  --ico-border: 1px;
}

/* ------------------------------------------------------------
   Concierge theme — navy/emerald/gold private banking (the
   previous default; kept for the side-by-side conversation).
   ------------------------------------------------------------ */
[data-theme="concierge"] {
  --font-display: "Fraunces", Georgia, serif;
  --text-hero: 56px;
  --font-body: "Lato", -apple-system, sans-serif;

  --navy: #0e1f33; --navy-2: #16304d; --navy-3: #1d3c5e;
  --ink: #1b2a3d; --ink-soft: #51617a; --ink-faint: #62768d;

  --money: #22815f; --money-deep: #1c6b50; --money-tint: #e4f1eb;
  --gild: #b9904a; --gild-text: #856122; --gild-soft: #d8b878; --gild-tint: #f4ead7;

  --bg: #f5f1e8; --surface: #fffdf8; --surface-2: #faf7ef;
  --line: rgba(14, 31, 51, 0.12); --line-soft: rgba(14, 31, 51, 0.07);

  --on-dark: #f3efe6;
  --on-dark-soft: rgba(243, 239, 230, 0.72);
  --on-dark-faint: rgba(243, 239, 230, 0.56);
  --dark-line: rgba(243, 239, 230, 0.14);

  --st-referred-bg: #e9e5da;  --st-referred-fg: #6a6253;
  --st-signed-bg: #dfe7f2;    --st-signed-fg: #2c5282;
  --st-docs-bg: #f4ead7;      --st-docs-fg: #8a6526;
  --st-activated-bg: #d9ecf2; --st-activated-fg: #1d6a80;
  --st-trading-bg: #e4f1eb;   --st-trading-fg: #1c6b50;
  --warn: #b65c2e; --warn-tint: #f8e9df;

  --radius: 14px; --radius-sm: 9px;
  --shadow-card: 0 1px 2px rgba(14, 31, 51, 0.05), 0 8px 28px -12px rgba(14, 31, 51, 0.14);
  --shadow-pop: 0 12px 40px -8px rgba(14, 31, 51, 0.28);
  --card-bg: var(--surface);
  --card-border: 1px solid var(--line-soft);
  --card-rule: 0px solid transparent;
  --chip-pad: 3px 10px;
  --chip-case: none;
  --chip-ls: 0;
  --chip-dot: inline-block;

  --hero-bg:
    radial-gradient(120% 160% at 85% -20%, rgba(34, 129, 95, 0.22), transparent 55%),
    radial-gradient(90% 130% at -10% 110%, rgba(185, 144, 74, 0.16), transparent 50%),
    linear-gradient(160deg, #16304d 0%, #0e1f33 58%, #0b1828 100%);
  --hero-fg: var(--on-dark);
  --hero-fg-soft: var(--on-dark-soft);
  --hero-fg-faint: var(--on-dark-faint);
  --hero-cell-bg: rgba(255, 255, 255, 0.06);
  --hero-cell-line: var(--dark-line);
  --hero-kicker: var(--gild-soft);
  --hero-accent: var(--gild-soft);
  --hero-rule: 0px solid transparent;
  --hero-hairline: linear-gradient(90deg, transparent, var(--gild-soft), transparent);

  --nav-bg: var(--navy);
  --nav-fg: var(--on-dark);
  --nav-fg-soft: var(--on-dark-soft);
  --nav-line: 0px solid transparent;
  --nav-active-bg: rgba(255, 255, 255, 0.1);
  --nav-active-line: var(--gild-soft);

  --bar: var(--money);
  --bar-peak: var(--money-deep);

  --hero-shadow: var(--shadow-pop);
  --hero-pad: 32px 32px 24px;
  --delta-bg: rgba(255, 255, 255, 0.92);
  --delta-fg: var(--money);
  --delta-pad: 3px 9px;
  --chip-fs: 12px;
  --card-pad-x: 24px;
  --field-bg: var(--surface);
  --pop-bg: var(--surface);
  --ico-bg: var(--money-tint);
  --ico-border: 0px;
}

/* ------------------------------------------------------------
   CT-blue theme — continuity with the current trading app.
   ------------------------------------------------------------ */
[data-theme="ct-blue"] {
  --font-display: "Lato", -apple-system, sans-serif;
  --text-hero: 56px;
  --font-body: "Lato", -apple-system, sans-serif;

  --navy: #14537a; --navy-2: #1a6798; --navy-3: #1f78b1;
  --ink: #20303f; --ink-soft: #5a6c7c; --ink-faint: #5d7488;

  --money: #1c8a4e; --money-deep: #15703e; --money-tint: #e2f3e9;
  --gild: #1695ca; --gild-text: #0d6e96; --gild-soft: #5cb9e0; --gild-tint: #e0f1f9;

  --bg: #f2f7fa; --surface: #ffffff; --surface-2: #f7fafc;
  --line: rgba(20, 83, 122, 0.14); --line-soft: rgba(20, 83, 122, 0.07);

  --on-dark: #f4fafd;
  --on-dark-soft: rgba(244, 250, 253, 0.72);
  --on-dark-faint: rgba(244, 250, 253, 0.56);
  --dark-line: rgba(244, 250, 253, 0.16);

  --st-referred-bg: #e8edf1;  --st-referred-fg: #5a6c7c;
  --st-signed-bg: #ddeefa;    --st-signed-fg: #14537a;
  --st-docs-bg: #fdf0d9;      --st-docs-fg: #8a6526;
  --st-activated-bg: #d9f0f7; --st-activated-fg: #176d8d;
  --st-trading-bg: #e2f3e9;   --st-trading-fg: #15703e;
  --warn: #b65c2e; --warn-tint: #f8e9df;

  --radius: 14px; --radius-sm: 9px;
  --shadow-card: 0 1px 2px rgba(20, 83, 122, 0.06), 0 8px 24px -12px rgba(20, 83, 122, 0.16);
  --shadow-pop: 0 12px 40px -8px rgba(20, 83, 122, 0.3);
  --card-bg: var(--surface);
  --card-border: 1px solid var(--line-soft);
  --card-rule: 0px solid transparent;
  --chip-pad: 3px 10px;
  --chip-case: none;
  --chip-ls: 0;
  --chip-dot: inline-block;

  --hero-bg:
    radial-gradient(120% 160% at 85% -20%, rgba(28, 138, 78, 0.18), transparent 55%),
    linear-gradient(160deg, #1a6798 0%, #14537a 58%, #0f3f5e 100%);
  --hero-fg: var(--on-dark);
  --hero-fg-soft: var(--on-dark-soft);
  --hero-fg-faint: var(--on-dark-faint);
  --hero-cell-bg: rgba(255, 255, 255, 0.06);
  --hero-cell-line: var(--dark-line);
  --hero-kicker: var(--gild-soft);
  --hero-accent: var(--gild-soft);
  --hero-rule: 0px solid transparent;
  --hero-hairline: linear-gradient(90deg, transparent, var(--gild-soft), transparent);

  --nav-bg: var(--navy);
  --nav-fg: var(--on-dark);
  --nav-fg-soft: var(--on-dark-soft);
  --nav-line: 0px solid transparent;
  --nav-active-bg: rgba(255, 255, 255, 0.1);
  --nav-active-line: var(--gild-soft);

  --bar: var(--money);
  --bar-peak: var(--money-deep);

  --hero-shadow: var(--shadow-pop);
  --hero-pad: 32px 32px 24px;
  --delta-bg: rgba(255, 255, 255, 0.92);
  --delta-fg: var(--money);
  --delta-pad: 3px 9px;
  --chip-fs: 12px;
  --card-pad-x: 24px;
  --field-bg: var(--surface);
  --pop-bg: var(--surface);
  --ico-bg: var(--money-tint);
  --ico-border: 0px;
}