/* ==========================================================================
   SoloTrace design tokens
   Single source of truth for colour, type, space, radius and motion.
   Approved palette only. No extra accent colours.
   ========================================================================== */

:root {
  /* --- Palette (approved) ------------------------------------------------ */
  --st-ivory:  #F8F6F2; /* Warm Ivory   : main page background                      */
  --st-beige:  #EDE5DA; /* Soft Beige   : cards, panels                              */
  --st-greige: #E7E4DF; /* Light Greige : cards, hero panel, dividers                */
  --st-blue:   #A9C2D3; /* Dusty Blue   : fills, highlights, accents on navy.
                                          Never body text on light backgrounds.      */
  --st-navy:   #0F172A; /* Deep Navy    : text, logo, primary buttons, dark sections */

  /* --- Derived tints (navy and ivory mixed, not new hues) ----------------- */
  --st-navy-72:  #505562;               /* muted text on light, 6.9:1 on ivory  */
  --st-ivory-75: #BEBEC0;               /* muted text on navy, 9.6:1 on navy    */
  --st-navy-a04: rgb(15 23 42 / 0.04);
  --st-navy-a08: rgb(15 23 42 / 0.08);
  --st-navy-a14: rgb(15 23 42 / 0.14);
  --st-ivory-a12: rgb(248 246 242 / 0.12);
  --st-ivory-a24: rgb(248 246 242 / 0.24);

  /* --- Semantic colours, light surface (default) -------------------------- */
  --st-bg:            var(--st-ivory);
  --st-fg:            var(--st-navy);
  --st-fg-muted:      var(--st-navy-72);
  --st-surface:       var(--st-beige);
  --st-surface-alt:   var(--st-greige);
  --st-surface-tint:  var(--st-blue);
  --st-accent:        var(--st-navy);   /* small labels on light use navy, never blue */
  --st-divider:       var(--st-greige);
  --st-focus:         var(--st-navy);
  --st-ring:          var(--st-navy);   /* keyboard focus outline (owner, 2 Nov 2026)            */
  --st-ring-glow:     0 0 0 8px rgb(169 194 211 / 0.5);    /* soft 4px Dusty Blue halo outside the 2px ring  */
  --st-navy-press:    #0A1020;           /* primary button while pressed: slightly darker navy    */
  --st-btn-bg:        var(--st-navy);
  --st-btn-fg:        var(--st-ivory);
  --st-btn-outline:   var(--st-navy);
  --st-btn-hover-tint: var(--st-navy-a08);
  --st-shadow-btn:    0 8px 20px -8px rgb(15 23 42 / 0.45);

  /* --- Typography --------------------------------------------------------- */
  --st-font-heading: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --st-font-body:    "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --st-fs-label:   0.75rem;                                   /* 12px uppercase */
  --st-fs-small:   0.875rem;                                  /* 14px           */
  --st-fs-body:    1rem;                                      /* 16px           */
  --st-fs-lead:    1.125rem;                                  /* 18px           */
  --st-fs-h4:      1.125rem;
  --st-fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --st-fs-h2:      clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --st-fs-h1:      clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --st-fs-display: clamp(2.75rem, 1.8rem + 4.5vw, 5.25rem);

  --st-lh-body:    1.65;
  --st-lh-tight:   1.35;
  --st-lh-heading: 1.08;

  --st-tracking-label:   0.14em;
  --st-tracking-heading: -0.02em;

  --st-fw-light:    300;
  --st-fw-regular:  400;
  --st-fw-medium:   500;
  --st-fw-bold:     700;
  --st-fw-extrabold: 800;

  /* --- Space -------------------------------------------------------------- */
  --st-space-1:  0.25rem;
  --st-space-2:  0.5rem;
  --st-space-3:  0.75rem;
  --st-space-4:  1rem;
  --st-space-5:  1.5rem;
  --st-space-6:  2rem;
  --st-space-7:  3rem;
  --st-space-8:  4rem;
  --st-space-9:  6rem;
  --st-section:  clamp(4rem, 8vw, 7.5rem);

  /* --- Radius ------------------------------------------------------------- */
  --st-radius-sm: 8px;   /* buttons, inputs */
  --st-radius-md: 12px;  /* cards           */
  --st-radius-lg: 20px;  /* hero panel      */

  /* --- Motion ------------------------------------------------------------- */
  --st-dur-fast: 160ms;
  --st-dur:      280ms;
  --st-dur-slow: 640ms;
  --st-ease:     cubic-bezier(0.2, 0.7, 0.2, 1);

  /* --- Layout ------------------------------------------------------------- */
  --st-container: 72rem;
  --st-gutter:    clamp(1rem, 4vw, 2.5rem);
}

/* Navy surface: remap semantic tokens for the dark band and any navy panel. */
.st-navy,
[data-surface="navy"] {
  --st-bg:            var(--st-navy);
  --st-fg:            var(--st-ivory);
  --st-fg-muted:      var(--st-ivory-75);
  --st-surface:       var(--st-ivory-a12);
  --st-surface-alt:   var(--st-ivory-a12);
  --st-surface-tint:  var(--st-blue);
  --st-accent:        var(--st-blue);   /* small headings and accents on navy */
  --st-divider:       var(--st-ivory-a24);
  --st-focus:         var(--st-blue);
  --st-ring:          var(--st-ivory);  /* on navy the outline is ivory so it stays visible     */
  --st-ring-glow:     0 0 0 8px rgb(169 194 211 / 0.3);    /* halo at lower opacity on navy                  */
  --st-btn-bg:        var(--st-ivory);
  --st-btn-fg:        var(--st-navy);
  --st-btn-outline:   var(--st-ivory);
  --st-btn-hover-tint: var(--st-ivory-a12);
  --st-shadow-btn:    0 8px 20px -8px rgb(0 0 0 / 0.6);
  color: var(--st-fg);
  background: var(--st-bg);
}