/*
 * Fortico Starter — tokens.css
 *
 * The single source of truth for the design system.
 * All values are fluid between 320px (20rem) and 1440px (90rem).
 *
 * Clamp formula:
 *   slope     = (max - min) / (90 - 20)
 *   intercept = min - slope * 20
 *   result    = clamp(min, intercept + slope * 100vw, max)
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * INDEX
 *   1. Brand Colours        (override per project)
 *   2. Semantic Colours     (reference brand colours — never change structure)
 *   3. Typography — Families
 *   4. Typography — Scale   (fluid)
 *   5. Typography — Leading & Tracking
 *   6. Spacing Scale        (fluid)
 *   7. Layout
 *   8. Borders & Radii
 *   9. Shadows
 *  10. Transitions
 *  11. Z-Index
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * TO CUSTOMISE FOR A PROJECT:
 *   Override brand colour variables in a <style> block in header.php,
 *   or in a project-specific tokens-override.css enqueued after this file.
 *   Never edit this file per-project — fork the theme instead.
 */

:root {

  /* ─────────────────────────────────────────────────────────────────────────
   * 1. BRAND COLOURS
   * These are the 8–10 raw colour values for this project.
   * Override these. Everything else derives from them.
   * ───────────────────────────────────────────────────────────────────────── */

  --brand-black:       #0a0a0a;
  --brand-white:       #ffffff;
  --brand-primary:     #1a1a2e;   /* Replace with client primary */
  --brand-secondary:   #16213e;   /* Replace with client secondary */
  --brand-accent:      #0f3460;   /* Replace with client accent */
  --brand-highlight:   #e94560;   /* Replace with client highlight */
  --brand-neutral-100: #f8f8f8;
  --brand-neutral-200: #efefef;
  --brand-neutral-300: #d4d4d4;
  --brand-neutral-400: #a3a3a3;
  --brand-neutral-500: #737373;
  --brand-neutral-600: #525252;
  --brand-neutral-700: #404040;
  --brand-neutral-800: #262626;
  --brand-neutral-900: #171717;


  /* ─────────────────────────────────────────────────────────────────────────
   * 2. SEMANTIC COLOURS
   * These reference brand colours by role.
   * Components and blocks use these — never the raw brand values directly.
   * ───────────────────────────────────────────────────────────────────────── */

  /* Surfaces */
  --color-bg:              var(--brand-white);
  --color-bg-alt:          var(--brand-neutral-100);
  --color-bg-dark:         var(--brand-primary);
  --color-bg-darker:       var(--brand-secondary);

  /* Text */
  --color-text:            var(--brand-neutral-800);
  --color-text-muted:      var(--brand-neutral-500);
  --color-text-inverse:    var(--brand-white);
  --color-heading:         var(--brand-primary);
  --color-heading-inverse: var(--brand-white);

  /* Interactive */
  --color-primary:         var(--brand-primary);
  --color-primary-hover:   var(--brand-secondary);
  --color-accent:          var(--brand-accent);
  --color-highlight:       var(--brand-highlight);

  /* Borders */
  --color-border:          var(--brand-neutral-200);
  --color-border-strong:   var(--brand-neutral-300);

  /* Feedback */
  --color-success:         #16a34a;
  --color-warning:         #d97706;
  --color-error:           #dc2626;
  --color-info:            #2563eb;


  /* ─────────────────────────────────────────────────────────────────────────
   * 3. TYPOGRAPHY — FAMILIES
   * ───────────────────────────────────────────────────────────────────────── */

  --font-heading: 'Inter', system-ui, sans-serif;   /* Replace with project font */
  --font-body:    'Inter', system-ui, sans-serif;   /* Replace with project font */
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Weights */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-black:     900;


  /* ─────────────────────────────────────────────────────────────────────────
   * 4. TYPOGRAPHY — FLUID SCALE
   * Min → Max across 320px → 1440px viewport.
   *
   * Step       Min     Max     Intercept    Slope
   * ─────────────────────────────────────────────
   * text-xs    12px    14px    0.7143rem    0.1786vw
   * text-sm    14px    16px    0.8393rem    0.1786vw
   * text-base  16px    18px    0.9643rem    0.1786vw
   * text-md    18px    22px    1.0536rem    0.3571vw
   * text-lg    20px    28px    1.1071rem    0.7143vw
   * text-xl    24px    36px    1.2857rem    1.0714vw
   * text-2xl   28px    48px    1.3571rem    1.7857vw
   * text-3xl   36px    64px    1.6429rem    2.5000vw
   * text-4xl   48px    80px    2.1429rem    2.8571vw
   * text-5xl   60px   100px    2.5000rem    3.5714vw
   * text-6xl   72px   120px    2.8571rem    4.2857vw
   * ───────────────────────────────────────────────────────────────────────── */

  --text-xs:   clamp(0.75rem,   0.7143rem + 0.1786vw, 0.875rem);
  --text-sm:   clamp(0.875rem,  0.8393rem + 0.1786vw, 1rem);
  --text-base: clamp(1rem,      0.9643rem + 0.1786vw, 1.125rem);
  --text-md:   clamp(1.125rem,  1.0536rem + 0.3571vw, 1.375rem);
  --text-lg:   clamp(1.25rem,   1.1071rem + 0.7143vw, 1.75rem);
  --text-xl:   clamp(1.5rem,    1.2857rem + 1.0714vw, 2.25rem);
  --text-2xl:  clamp(1.75rem,   1.3571rem + 1.7857vw, 3rem);
  --text-3xl:  clamp(2.25rem,   1.6429rem + 2.5vw,    4rem);
  --text-4xl:  clamp(3rem,      2.1429rem + 2.8571vw, 5rem);
  --text-5xl:  clamp(3.75rem,   2.5rem    + 3.5714vw, 6.25rem);
  --text-6xl:  clamp(4.5rem,    2.8571rem + 4.2857vw, 7.5rem);


  /* ─────────────────────────────────────────────────────────────────────────
   * 5. TYPOGRAPHY — LEADING & TRACKING
   * ───────────────────────────────────────────────────────────────────────── */

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.15em;


  /* ─────────────────────────────────────────────────────────────────────────
   * 6. SPACING — FLUID SCALE
   * Min → Max across 320px → 1440px viewport.
   *
   * Step       Min    Max     Intercept     Slope
   * ─────────────────────────────────────────────
   * space-3xs    4px    6px    0.2143rem    0.1786vw
   * space-2xs    6px   10px    0.2857rem    0.3571vw
   * space-xs     8px   14px    0.3571rem    0.5357vw
   * space-sm    12px   20px    0.6071rem    0.7143vw
   * space-md    16px   32px    0.7143rem    1.4286vw
   * space-lg    24px   48px    1.0714rem    2.1429vw
   * space-xl    32px   80px    1.1429rem    4.2857vw
   * space-2xl   48px  120px    1.7143rem    6.4286vw
   * space-3xl   64px  160px    2.2857rem    8.5714vw
   * space-4xl   96px  240px    3.4286rem   12.8571vw
   * ───────────────────────────────────────────────────────────────────────── */

  --space-3xs: clamp(0.25rem,  0.2143rem + 0.1786vw, 0.375rem);
  --space-2xs: clamp(0.375rem, 0.2857rem + 0.3571vw, 0.625rem);
  --space-xs:  clamp(0.5rem,   0.3571rem + 0.5357vw, 0.875rem);
  --space-sm:  clamp(0.75rem,  0.6071rem + 0.7143vw, 1.25rem);
  --space-md:  clamp(1rem,     0.7143rem + 1.4286vw, 2rem);
  --space-lg:  clamp(1.5rem,   1.0714rem + 2.1429vw, 3rem);
  --space-xl:  clamp(2rem,     1.1429rem + 4.2857vw, 5rem);
  --space-2xl: clamp(3rem,     1.7143rem + 6.4286vw, 7.5rem);
  --space-3xl: clamp(4rem,     2.2857rem + 8.5714vw, 10rem);
  --space-4xl: clamp(6rem,     3.4286rem + 12.8571vw, 15rem);


  /* ─────────────────────────────────────────────────────────────────────────
   * 7. LAYOUT
   * ───────────────────────────────────────────────────────────────────────── */

  /* Container widths */
  --container-max:     75rem;      /* 1200px — standard content width   */
  --container-wide:    90rem;      /* 1440px — wide/full-bleed sections */
  --container-narrow:  48rem;      /* 768px  — editorial/prose content  */

  /* Gutter — the space between container and viewport edge */
  --container-gutter: clamp(1rem, 5vw, 4rem);

  /* Section vertical rhythm */
  --section-padding:  var(--space-2xl);

  /* Grid */
  --grid-columns:     12;
  --grid-gap:         var(--space-md);


  /* ─────────────────────────────────────────────────────────────────────────
   * 8. BORDERS & RADII
   * ───────────────────────────────────────────────────────────────────────── */

  --border-width-thin:   1px;
  --border-width:        2px;
  --border-width-thick:  3px;

  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-xl:   2rem;
  --radius-full: 9999px;


  /* ─────────────────────────────────────────────────────────────────────────
   * 9. SHADOWS
   * ───────────────────────────────────────────────────────────────────────── */

  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Inset/pressed shadow */
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);


  /* ─────────────────────────────────────────────────────────────────────────
   * 10. TRANSITIONS
   * ───────────────────────────────────────────────────────────────────────── */

  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-base:    var(--duration-base) var(--ease-default);
  --transition-fast:    var(--duration-fast) var(--ease-default);
  --transition-spring:  var(--duration-base) var(--ease-spring);


  /* ─────────────────────────────────────────────────────────────────────────
   * 11. Z-INDEX
   * ───────────────────────────────────────────────────────────────────────── */

  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-drawer:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-max:      9999;

}