/* =============================================================
   Forward Finance — Design Tokens
   Extracted verbatim from the :root block inside index.html so the
   standalone pages in pages/ share one source of truth for colour,
   type, spacing, radii and motion.
   ============================================================= */

:root {
  /* -------------------------------------------------------
     COLOURS — Brand
     ------------------------------------------------------- */
  --fw-blue:           #0063FF; /* Forward Blue — primary brand */
  --fw-blue-deep:      #0047BB; /* Pantone 2728 C — pressed / secondary */
  --fw-black:          #101820; /* Pantone Black 6 C — default ink */
  --fw-true-black:     #000000; /* Logo on light only */
  --fw-white:          #FFFFFF;

  /* Forward Finance signal accent — warm gold (capital / approval).
     Replaces Wealth's cyan/teal. Use for highlights, headline
     underlines, key numerals, chart fills, badges — never body text
     on white (use --ff-gold-deep where a gold word needs contrast). */
  --ff-gold:           #E5AD43; /* primary signal — premium gold (was #F2A73C) */
  --ff-gold-deep:      #B87814; /* contrast-safe gold text / pressed */
  --ff-gold-bright:    #E8B04A; /* on dark surfaces — premium gold (was #FFB84D) */
  --ff-gold-soft:      #FBEED3; /* tint background */
  --ff-gold-line:      #F0D9A6; /* hairline on light */

  /* Semantic accent aliases — point components at these, not raw hues */
  --accent:            var(--ff-gold);
  --accent-strong:     var(--ff-gold-deep);
  --accent-on-dark:    var(--ff-gold-bright);
  --accent-soft:       var(--ff-gold-soft);
  --on-accent:         var(--fw-black); /* ink reads on gold */

  /* Legacy Forward Wealth accents — retained for cross-brand surfaces
     only. Do NOT use on Forward Finance. */
  --fw-cyan:           #00FFFF; /* legacy (Wealth) */
  --fw-teal:           #2CD5C4; /* legacy (Wealth) */

  /* -------------------------------------------------------
     COLOURS — Neutral ramp (built around --fw-black)
     ------------------------------------------------------- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F6F6F4; /* Bone — product chrome bg */
  --neutral-100:  #EFF0F1;
  --neutral-200:  #E7E8EC; /* Hairline borders on light */
  --neutral-300:  #D1D4DA;
  --neutral-400:  #A6ABB4;
  --neutral-500:  #767D89;
  --neutral-600:  #545C6A;
  --neutral-700:  #383F4C;
  --neutral-800:  #232934;
  --neutral-900:  #101820; /* = --fw-black */

  /* -------------------------------------------------------
     COLOURS — Semantic foreground / background
     ------------------------------------------------------- */
  --fg-1:        var(--fw-black);       /* primary ink */
  --fg-2:        var(--neutral-700);    /* secondary ink */
  --fg-3:        var(--neutral-500);    /* tertiary / placeholder */
  --fg-on-dark:  var(--neutral-0);
  --fg-on-brand: var(--neutral-0);
  --fg-link:     var(--fw-blue);

  --bg-1:        var(--neutral-0);      /* marketing default */
  --bg-2:        var(--neutral-50);     /* product chrome */
  --bg-3:        var(--neutral-100);    /* recessed */
  --bg-dark-1:   var(--fw-black);       /* dark default */
  --bg-dark-2:   var(--neutral-800);
  --bg-brand:    var(--fw-blue);

  --border-1:    var(--neutral-200);
  --border-2:    var(--neutral-300);
  --border-dark: rgba(255, 255, 255, 0.12);

  /* -------------------------------------------------------
     COLOURS — Status
     ------------------------------------------------------- */
  --status-success:    #1E8F5A;
  --status-success-bg: #E4F4EC;
  --status-warning:    #B86E00;
  --status-warning-bg: #FCF1DD;
  --status-danger:     #C8341B;
  --status-danger-bg:  #FCE6E1;
  --status-info:       var(--fw-blue);
  --status-info-bg:    #E5EFFF;

  /* Market direction (charts, portfolio deltas) */
  --market-up:   #1E8F5A;
  --market-down: #C8341B;
  --market-flat: var(--neutral-500);

  /* -------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------- */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale — 1.250 minor third, anchored at 16px */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  76px;
  --text-7xl:  96px;

  /* Line heights */
  --lh-tight:   1.05; /* @kind font */
  --lh-snug:    1.18; /* @kind font */
  --lh-normal:  1.35; /* @kind font */
  --lh-relaxed: 1.55; /* @kind font */
  --lh-loose:   1.7;  /* @kind font */

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.12em;

  /* -------------------------------------------------------
     SPACING — 4-pt base grid
     ------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-14: 128px;
  --space-16: 160px;

  /* -------------------------------------------------------
     RADII
     ------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;

  /* -------------------------------------------------------
     SHADOWS — neutral, no blue tint
     ------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(16, 24, 32, 0.06), 0 1px 3px rgba(16, 24, 32, 0.04);
  --shadow-2: 0 4px 12px rgba(16, 24, 32, 0.08), 0 2px 4px rgba(16, 24, 32, 0.04);
  --shadow-3: 0 12px 32px rgba(16, 24, 32, 0.12), 0 4px 8px rgba(16, 24, 32, 0.06);
  --shadow-4: 0 24px 60px rgba(16, 24, 32, 0.18), 0 8px 16px rgba(16, 24, 32, 0.08);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--fw-blue);

  /* -------------------------------------------------------
     MOTION
     ------------------------------------------------------- */
  --ease-forward:    cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1); /* @kind other */
  --duration-micro:  120ms; /* @kind other */
  --duration-base:   220ms; /* @kind other */
  --duration-page:   420ms; /* @kind other */

  /* -------------------------------------------------------
     LAYOUT
     ------------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  880px;
  --container-lg:  1120px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --nav-h-desktop: 72px;
  --nav-h-mobile:  56px;
}