/* ============================================================================
 * fx-tokens.css — ForceX design system tokens
 * ============================================================================
 *
 * Single source of truth for every CSS custom property on forcex.com.
 *
 * Authoritative directive sources (read these before adding new tokens):
 *   /opt/forcex/transfer/web/docs/ForceX_Typography_and_CSS_Catalog_Spec.md
 *   /opt/forcex/transfer/web/docs/ForceX_Header_Style_Directive.md
 *   /opt/forcex/transfer/web/docs/ForceX_Page_Standard_Using_Signup_Baseline.md
 *   /opt/forcex/transfer/web/docs/ForceX_Data_Surface_Layout_and_Table_Directive.md
 *
 * Hard rules (do NOT violate without amending the directives first):
 *   - Type scale: 12 / 14 / 16 / 18 / 20 / 24 / 32 / 40 / 48 / 64 ONLY
 *   - Spacing scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 ONLY
 *   - Radius scale: 8 / 12 / 16 ONLY (no 3, 4, 6 anywhere)
 *   - Mono font is for machine identifiers only — never headlines, body, or nav
 *
 * Pages should @import or <link> this BEFORE any page-level styling so that
 * page composition can override semantics if absolutely needed during the
 * design-system migration window.
 * ========================================================================== */

:root {

  /* ── Font families ──────────────────────────────────────────────────────── */
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* ── Type scale ─────────────────────────────────────────────────────────── */
  /* Approved scale per ForceX_Typography_and_CSS_Catalog_Spec.md §"Recommended Type Scale".
   * No arbitrary font sizes outside this list may appear in feature CSS. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;
  --text-5xl:  48px;
  --text-6xl:  64px;

  /* ── Font weights ───────────────────────────────────────────────────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Line heights ───────────────────────────────────────────────────────── */
  --leading-tight:   1.05;
  --leading-snug:    1.15;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  /* ── Letter spacing ─────────────────────────────────────────────────────── */
  --tracking-tightest: -0.04em;  /* hero/display only */
  --tracking-tighter:  -0.02em;  /* H1 */
  --tracking-tight:    -0.01em;  /* H2 */
  --tracking-normal:   0;
  --tracking-wide:     0.04em;   /* button caps */
  --tracking-wider:    0.12em;   /* labels */
  --tracking-widest:   0.14em;   /* eyebrows */

  /* ── Spacing scale ──────────────────────────────────────────────────────── */
  /* Approved scale per ForceX_Typography_and_CSS_Catalog_Spec.md §"Spacing System".
   * Tight UI: 8-16. Input/button padding: 12-16. Card padding: 20-24.
   * Section spacing: 48-80. Hero spacing: 64-96. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Radius scale ───────────────────────────────────────────────────────── */
  /* Approved scale per ForceX_Typography_and_CSS_Catalog_Spec.md §"Border Radius".
   * Small controls 8 / standard cards+inputs+buttons 12 / large panels+hero 16.
   * 3px, 4px, 6px values are EXPLICITLY rejected by the page standard doc. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ── Color tokens — palette ─────────────────────────────────────────────── */
  /* Dark surfaces (the only theme today; light theme may be added later) */
  --bg:        #030712;  /* page base */
  --surface:   #111827;  /* panel/card base */
  --surface2:  #1f2937;  /* nested surface, input fill */
  --border:    #1f2937;  /* default divider */
  --border2:   #374151;  /* stronger divider, input border */
  --text:      #f3f4f6;  /* primary text */
  --muted:     #6b7280;  /* secondary/disabled text */
  --muted2:    #9ca3af;  /* tertiary text, body on dark */

  /* Brand accent */
  --accent:    #2563eb;
  --accent-lt: #3b82f6;
  --accent-bg: rgba(37, 99, 235, 0.10);
  --accent-bg-strong: rgba(59, 130, 246, 0.22);

  /* Semantic state colors */
  --green:     #4ade80;
  --green-bg:  rgba(74, 222, 128, 0.08);
  --red:       #f87171;
  --red-bg:    rgba(248, 113, 113, 0.08);
  --yellow:    #facc15;
  --yellow-bg: rgba(250, 204, 21, 0.08);
  --purple:    #a78bfa;
  --purple-bg: rgba(167, 139, 250, 0.10);

  /* ── Border tokens ──────────────────────────────────────────────────────── */
  /* Use these instead of hand-rolled rgba(255,255,255,0.0X) values. */
  --border-subtle: 1px solid rgba(255, 255, 255, 0.08);
  --border-strong: 1px solid rgba(255, 255, 255, 0.14);

  /* ── Shadow tokens ──────────────────────────────────────────────────────── */
  /* Shadows are minimal and infrequent per the spec. Cards and panels rely
   * on borders, not shadow, for separation. */
  --shadow-none: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.32);  /* dropdown / modal only */

  /* ── Container width tokens ─────────────────────────────────────────────── */
  /* Per ForceX_Typography_and_CSS_Catalog_Spec.md §"Layout and Containers".
   * Pick one based on the page archetype. */
  --container-form:     540px;   /* Type A — focused workflow (signup, verify, reset) */
  --container-reading:  760px;   /* Type B/E — reading content, docs */
  --container-standard: 1024px;  /* Type C narrow — product utility */
  --container-wide:     1280px;  /* Type C wide — analytics, marketing hero */
  --container-app:      1440px;  /* Type D — explorer/data canvas */

  /* ── Page padding tokens ────────────────────────────────────────────────── */
  --page-padding-x-desktop: 32px;
  --page-padding-x-mobile:  16px;

  /* ── Header tokens ──────────────────────────────────────────────────────── */
  /* Per ForceX_Header_Style_Directive.md §"Recommended Token Additions".
   * Sticky translucent header with subtle blur and scroll state. */
  --header-height:         60px;
  --header-height-mobile:  54px;
  --header-bg:             rgba(3, 7, 18, 0.74);
  --header-bg-scrolled:    rgba(3, 7, 18, 0.84);
  --header-border:         rgba(255, 255, 255, 0.08);
  --header-border-strong:  rgba(255, 255, 255, 0.12);
  --header-blur:           10px;
  --header-blur-scrolled:  12px;
  --header-shadow:         var(--shadow-none);
  --header-transition:     180ms ease;

  /* ── Chart surface tokens (consumed by fx-charts.js) ─────────────────────── */
  /* Alpha values chosen so gridlines/axis read at the same visual weight on
   * dark surfaces as their light-mode counterparts do on light surfaces. */
  --chart-grid:            rgba(30, 41, 59, 0.5);
  --chart-axis:            rgba(51, 65, 85, 0.5);
  --chart-label:           rgba(100, 116, 139, 1);
  --chart-tooltip-bg:      rgba(15, 23, 42, 0.95);
  --chart-tooltip-border:  rgba(51, 65, 85, 1);
  --chart-tooltip-text:    rgba(226, 232, 240, 1);

  /* ── Decorative shell (grid + glow) — baseline (dark theme, marketing/auth) ── */
  /* Density-tiered overrides are defined at the bottom of this file under
     .fx-shell-decorative.fx-surface-account and .fx-shell-decorative.fx-surface-data. */
  --grid-line: rgba(37, 99, 235, 0.04);
  --grid-glow: rgba(37, 99, 235, 0.07);

  /* ── Motion timing ──────────────────────────────────────────────────────── */
  --motion-fast:   150ms;  /* hover, focus */
  --motion-base:   200ms;  /* most transitions */
  --motion-slow:   280ms;  /* modals, drawers */
  --easing-base:   cubic-bezier(0.2, 0, 0.2, 1);

  /* ── Z-index scale ──────────────────────────────────────────────────────── */
  --z-base:      1;
  --z-panel:     10;
  --z-dropdown:  100;
  --z-header:    1000;
  --z-modal:     2000;
  --z-toast:     3000;
}


/* ============================================================================
   Light theme overrides
   Activated by <html data-theme="light"> set by the no-flash bootstrap.
   Source: ForceX_Light_Theme_Requirements.md §5.2 / §6.2 / §7.2
   ============================================================================ */
:root[data-theme="light"] {
  /* ── Surface tonal hierarchy (requirement §5.3) ────────────────────────── */
  --bg:        #F5F7FA;  /* page base — cool off-white, never pure white */
  --surface:   #FFFFFF;  /* primary cards/panels */
  --surface2:  #EEF2F7;  /* nested surfaces, inputs, secondary panels */

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --text:      #0F172A;  /* primary text */
  --muted:     #64748B;  /* secondary/disabled text */
  --muted2:    #475569;  /* tertiary */

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --border:    #E5E7EB;
  --border2:   #CBD5E1;
  --border-subtle: 1px solid rgba(15, 23, 42, 0.08);
  --border-strong: 1px solid rgba(15, 23, 42, 0.14);

  /* ── Accent ────────────────────────────────────────────────────────────── */
  --accent:    #2563EB;
  --accent-lt: #3B82F6;
  --accent-bg: rgba(37, 99, 235, 0.08);
  --accent-bg-strong: rgba(37, 99, 235, 0.16);

  /* ── Header glass (requirement §7.2) ───────────────────────────────────── */
  --header-bg:            rgba(245, 247, 250, 0.72);
  --header-bg-scrolled:   rgba(245, 247, 250, 0.88);
  --header-border:        rgba(15, 23, 42, 0.08);
  --header-border-strong: rgba(15, 23, 42, 0.12);

  /* ── Chart surface tokens (light) ──────────────────────────────────────── */
  --chart-grid:           rgba(15, 23, 42, 0.08);
  --chart-axis:           rgba(15, 23, 42, 0.12);
  --chart-label:          #64748B;
  --chart-tooltip-bg:     rgba(255, 255, 255, 0.96);
  --chart-tooltip-border: rgba(15, 23, 42, 0.12);
  --chart-tooltip-text:   #0F172A;

  /* ── Decorative shell (grid + glow) — baseline light values ────────────── */
  --grid-line: rgba(37, 99, 235, 0.028);
  --grid-glow: rgba(37, 99, 235, 0.045);
}


/* ============================================================================
   Decorative shell density tiers
   Applied via modifier classes on .fx-shell-decorative. Independent of theme —
   each tier's dark/light pair is defined explicitly below.
   Source: ForceX_Light_Theme_Requirements.md §6 (revised)
   ============================================================================ */

/* Account/utility surfaces — mid density (dark) */
.fx-shell-decorative.fx-surface-account {
  --grid-line: rgba(37, 99, 235, 0.025);
  --grid-glow: rgba(37, 99, 235, 0.040);
}

/* Data/explorer/analytics surfaces — low density (dark) */
.fx-shell-decorative.fx-surface-data {
  --grid-line: rgba(37, 99, 235, 0.018);
  --grid-glow: rgba(37, 99, 235, 0.030);
}

/* Account/utility surfaces — mid density (light) */
:root[data-theme="light"] .fx-shell-decorative.fx-surface-account {
  --grid-line: rgba(37, 99, 235, 0.020);
  --grid-glow: rgba(37, 99, 235, 0.032);
}

/* Data/explorer/analytics surfaces — low density (light) */
:root[data-theme="light"] .fx-shell-decorative.fx-surface-data {
  --grid-line: rgba(37, 99, 235, 0.014);
  --grid-glow: rgba(37, 99, 235, 0.024);
}