/* ============================================================
   FILA FIXATIONS — Design System Foundations
   Colors + Typography tokens
   ============================================================ */

/* ---- Webfont: Fractul Variable (Adobe Typekit zhm4pbh) ---- */
/* Chargée via wp_enqueue_style (inc/assets.php) */
/* Legacy fallback kept for offline contexts */
@font-face {
  font-family: "TT Firs Neue";
  src: url("../fonts/TT-Firs-Neue-Variable.ttf") format("truetype-variations"),
       url("../fonts/TT-Firs-Neue-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ========== BRAND COLORS (from brand guidelines) ========== */
  --orange-forge:  #FF6B29; /* Pantone 1645 C — primary accent */
  --noir-graphite: #1E1E1E; /* Pantone 419 C — near-black */
  --gris-inox:     #A5AFBF; /* Pantone 536 C — steel blue-grey */
  --blanc-atelier: #F3ECE9; /* Pantone 9285 C — warm off-white */
  --pur-blanc:     #FFFFFF;

  /* ---- Orange forge tints/shades (for hover, states) ---- */
  --orange-700: #D8501A; /* pressed / darker */
  --orange-600: #F25E1F;
  --orange-500: #FF6B29; /* base */
  --orange-300: #FF9B6B;
  --orange-100: #FFE3D5; /* tint surface */

  /* ---- Graphite ramp ---- */
  --graphite-900: #141414;
  --graphite-800: #1E1E1E; /* base noir graphite */
  --graphite-700: #2A2A2A;
  --graphite-600: #3A3A3A;
  --graphite-500: #565656;

  /* ---- Inox / steel ramp ---- */
  --inox-600: #6B7689;
  --inox-500: #8995A6;
  --inox-400: #A5AFBF; /* base gris inox */
  --inox-300: #C2C9D3;
  --inox-200: #DCE0E6;
  --inox-100: #ECEEF1;

  /* ---- Atelier (warm paper) ramp ---- */
  --atelier-300: #E4D7D0;
  --atelier-200: #EDE3DE;
  --atelier-100: #F3ECE9; /* base blanc atelier */

  /* ========== SEMANTIC SURFACES ========== */
  --bg-base:     var(--blanc-atelier);
  --bg-paper:    var(--pur-blanc);
  --bg-raised:   var(--pur-blanc);
  --bg-inverse:  var(--noir-graphite);
  --bg-steel:    var(--gris-inox);

  /* ========== SEMANTIC TEXT ========== */
  --fg1: #1E1E1E;            /* primary text on light */
  --fg2: #565656;            /* secondary text on light */
  --fg3: #8995A6;            /* tertiary / captions on light */
  --fg-on-dark-1: #F3ECE9;   /* primary on dark */
  --fg-on-dark-2: #A5AFBF;   /* secondary on dark */
  --fg-accent: var(--orange-forge);

  /* ========== BORDERS / LINES ========== */
  --line-soft:   #E4D7D0;
  --line:        #DCE0E6;
  --line-strong: #C2C9D3;
  --line-on-dark: rgba(165,175,191,0.22);

  /* ========== TYPOGRAPHY ========== */
  --font-sans: "fractul-variable", "TT Firs Neue", "Helvetica Neue", Arial, sans-serif;
  --font-display: "fractul-variable", "TT Firs Neue", "Helvetica Neue", Arial, sans-serif;

  --w-thin: 250;
  --w-light: 320;
  --w-regular: 400;
  --w-medium: 540;
  --w-bold: 700;
  --w-black: 850;

  /* Fluid type scale — geometric, industrial */
  --t-display: 700;
  --fs-display: clamp(3rem, 6vw, 5.5rem);   /* hero */
  --fs-h1: clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 2.6vw, 2.5rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-lead: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.6;

  --tracking-eyebrow: 0.16em;  /* uppercase labels */
  --tracking-tight: -0.02em;   /* large display */

  /* ========== RADIUS ========== */
  --r-none: 0px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ========== SPACING (8px base) ========== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ========== SHADOWS / ELEVATION ========== */
  --shadow-sm: 0 1px 2px rgba(20,20,20,0.06), 0 1px 3px rgba(20,20,20,0.05);
  --shadow-md: 0 4px 12px rgba(20,20,20,0.08), 0 2px 4px rgba(20,20,20,0.05);
  --shadow-lg: 0 18px 40px rgba(20,20,20,0.14), 0 4px 10px rgba(20,20,20,0.06);
  --shadow-orange: 0 10px 28px rgba(255,107,41,0.32);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in helpers)
   ============================================================ */
.fila-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.fila-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}
.fila-h1 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); }
.fila-h2 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg1); }
.fila-h3 { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg1); }
.fila-lead { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg2); }
.fila-body { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); }
.fila-small { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-small); line-height: 1.5; color: var(--fg3); }