/**
 * Future Proof · Profiler — Design Tokens
 * ---------------------------------------------------------------
 * Source of truth: "Future Proof Brand Guidelines" v1.0 · July 2026
 * (Phoenix Mark kit). Marketing surface — enterprise-calm.
 *
 * Rules encoded here:
 *  - Near-monochrome teal; light surfaces dominate, ink bands for drama.
 *  - Pure black is never used — ink #0D3B49 is the darkest value on a page.
 *  - Shadows are ink-tinted, never black.
 *  - Gamification tokens (xp-gold, streak-fire) are DELIBERATELY ABSENT:
 *    learner-app only, never on portal or marketing.
 *  - Reference the semantic aliases in components, not the raw ramps.
 */

:root {
  /* ================= Color · teal scale (verbatim from kit) ===== */
  --teal-50:  #ECFCFE;
  --teal-100: #D0F5FA;
  --teal-200: #A8ECF4;
  --teal-300: #63DAEC;
  --teal-400: #12BCD8;
  --teal-500: #0297B1;
  --teal-600: #037E96;
  --teal-700: #016079;
  --teal-800: #0A4A5C;
  --teal-900: #0D3B49;  /* ink */
  --teal-950: #072530;

  /* ====== Color · neutrals — cool grey, faint teal undertone =====
     NOTE: guide swatches ship unlabeled; values synthesized to spec
     (hue ~197°, low sat). Swap verbatim if the kit tokens ship. */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6FAFB;
  --neutral-100: #EDF3F4;
  --neutral-200: #DFE8EA;
  --neutral-300: #C6D4D8;
  --neutral-400: #A2B7BD;
  --neutral-500: #7A929A;
  --neutral-600: #587077;
  --neutral-700: #43575E;
  --neutral-800: #304248;
  --neutral-900: #1F3138;
  --neutral-950: #142329;

  /* ================= Brand anchors ============================== */
  --brand:        var(--teal-500);
  --brand-strong: var(--teal-600);
  --brand-deep:   var(--teal-700);
  --brand-bright: var(--teal-400);
  --ink:          var(--teal-900);
  --ink-deep:     var(--teal-950);

  /* ================= Semantic aliases =========================== */
  --text-primary:   var(--ink);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-600); /* a11y: neutral-500 fails 4.5:1 on white — decorative use only */
  --text-inverse:   #FFFFFF;
  --text-inverse-secondary: var(--teal-100);
  --text-brand:     var(--teal-600);

  --bg-canvas:  #FFFFFF;
  --bg-surface: var(--neutral-50);
  --bg-tint:    var(--teal-50);
  --bg-tint-hover: var(--teal-100);
  --bg-ink:     var(--ink);

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand:  var(--teal-400);

  /* ================= Status (semantic · calm) =================== */
  --positive:      #1E9E5A;
  --positive-text: #156F41;
  --positive-bg:   #DFF5E8;

  --warning:       #E19A1F;
  --warning-text:  #8A5B00;
  --warning-bg:    #FCF1D6;

  --critical:      #D64545;
  --critical-text: #A82E2E;
  --critical-bg:   #FBE4E4;

  --calibrated:      var(--teal-400);
  --calibrated-text: var(--teal-700);
  --calibrated-bg:   var(--teal-50);

  /* ====== 5Profiler fit spectrum — one hue per fit (validated) ==
     Categorical identity colors for the five fits. Always paired with
     visible labels; never used as surface floods or action colors. */
  --fit-job:       #0297B1;  /* teal — the anchor, ties to parent brand */
  --fit-cognitive: #8B5CF6;  /* violet — mind */
  --fit-tech:      #2E9E63;  /* green — code that passes */
  --fit-values:    #C0509A;  /* rose — human warmth */
  --fit-judgment:  #E19A1F;  /* amber — the weighing */

  /* ================= Gradients ================================== */
  --gradient-brand: linear-gradient(135deg, var(--teal-400) 0%, var(--teal-700) 100%);
  --gradient-hero:  linear-gradient(160deg, var(--teal-900) 0%, var(--teal-950) 100%);
  --gradient-tint:  linear-gradient(135deg, var(--teal-300) 0%, var(--teal-400) 100%);

  /* ================= Typography ================================= */
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — 76/60/48/36/28/22/18/15/13/12, fluid at the top end */
  --text-6xl: clamp(2.875rem, 2rem + 4.4vw, 4.75rem);   /* 46 → 76 */
  --text-5xl: clamp(2.5rem,  1.9rem + 3vw,   3.75rem);  /* 40 → 60 */
  --text-4xl: clamp(2.125rem, 1.7rem + 2.2vw, 3rem);    /* 34 → 48 */
  --text-3xl: clamp(1.75rem, 1.5rem + 1.3vw, 2.25rem);  /* 28 → 36 */
  --text-2xl: clamp(1.5rem,  1.35rem + .8vw, 1.75rem);  /* 24 → 28 */
  --text-xl:   1.375rem;  /* 22 */
  --text-lg:   1.125rem;  /* 18 */
  --text-base: 0.9375rem; /* 15 */
  --text-sm:   0.8125rem; /* 13 */
  --text-xs:   0.75rem;   /* 12 */

  --leading-display: 1.05;
  --leading-body:    1.6;
  --leading-body-lg: 1.65;
  --leading-numeral: 1.0;

  --tracking-display: -0.02em;
  --tracking-numeral: -0.03em;
  --tracking-label:    0.08em;   /* eyebrows/labels · uppercase */

  /* ================= Spacing · 4px base grid ==================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ================= Corner radii =============================== */
  --radius-xs:  4px;
  --radius-md:  10px;   /* controls */
  --radius-lg:  14px;   /* cards */
  --radius-xl:  20px;   /* panels */
  --radius-2xl: 28px;   /* hero tiles */
  --radius-full: 999px; /* pills */
  --radius-control: var(--radius-md);
  --radius-card:    var(--radius-lg);

  /* ================= Layout ===================================== */
  --container-max:    1200px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4vw, 32px);

  /* ============ Elevation — ink-tinted, never black ============= */
  --shadow-xs: 0 1px 2px rgba(13, 59, 73, .05), 0 1px 3px rgba(13, 59, 73, .06);
  --shadow-sm: 0 2px 6px rgba(13, 59, 73, .07);
  --shadow-md: 0 6px 16px rgba(13, 59, 73, .09);
  --shadow-lg: 0 14px 28px rgba(13, 59, 73, .13);
  --shadow-xl: 0 24px 48px rgba(13, 59, 73, .16);
  --glow-brand: 0 6px 20px rgba(2, 151, 177, .35);

  /* ================= Motion · calm, never bouncy ================ */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}