/* Phoenix Prime Focus — design tokens.
   Variables only, no rules: nothing in this file styles anything on its own.
   These are the single source of truth for colour, type, spacing and motion —
   tailwind.config.js maps its theme onto them and assets/css/site.css reads them,
   so changing a value here flows through to both.
   Merged from the design system's six token files. */

:root{
  /* ===== COLOUR — black dominates, orange is the only accent, white is the breath ===== */

  /* Base — drawn from the logo artwork */
  --pf-black:#000000;
  --pf-anthracite:#1A1A1A;
  --pf-carbon:#2B2B2B;
  --pf-grey-600:#6B6B6B;
  --pf-grey-400:#A8A8A8;
  --pf-grey-200:#EAEAEA;
  --pf-grey-100:#F5F5F5;
  --pf-white:#FFFFFF;
  --pf-flame:#E86D09;
  --pf-flame-bright:#FF8A2A;
  --pf-ember:#A34A04;
  --pf-sand:#FBEAD9;

  /* Surfaces */
  --surface-page:var(--pf-white);
  --surface-raised:var(--pf-white);
  --surface-muted:var(--pf-grey-100);
  --surface-warm:var(--pf-sand);
  --surface-inverse:var(--pf-black);
  --surface-inverse-raised:var(--pf-anthracite);
  --surface-accent:var(--pf-flame);

  /* Text */
  --text-primary:var(--pf-black);
  --text-secondary:var(--pf-anthracite);
  --text-muted:var(--pf-grey-600);
  --text-on-inverse:var(--pf-white);
  --text-on-inverse-muted:var(--pf-grey-400);
  --text-on-accent:var(--pf-white);
  --text-accent:var(--pf-ember);

  /* Accent / interaction — orange is the ONLY live colour */
  --accent:var(--pf-flame);
  --accent-hover:var(--pf-ember);
  --accent-active:#8C3F03;
  --accent-on-dark:var(--pf-flame);
  --accent-on-dark-hover:var(--pf-flame-bright);

  /* Lines */
  --border-subtle:var(--pf-grey-200);
  --border-strong:var(--pf-black);
  --border-on-inverse:#333333;
  --border-accent:var(--pf-flame);

  /* State */
  --state-hover-tint:rgba(0,0,0,0.04);
  --state-press-tint:rgba(0,0,0,0.08);
  --state-disabled-text:var(--pf-grey-400);
  --state-disabled-surface:var(--pf-grey-200);
  --focus-ring:var(--pf-flame);

  /* Heat scale — technical charts, temperature readouts, gauges */
  --heat-0:var(--pf-sand);
  --heat-1:#F6C48A;
  --heat-2:var(--pf-flame-bright);
  --heat-3:var(--pf-flame);
  --heat-4:var(--pf-ember);
  --heat-5:var(--pf-black);

  /* ===== TYPE — Jost for display and labels, Barlow for body, Barlow Condensed for data ===== */

  /* Families */
  --font-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --font-label:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --font-body:"Barlow",system-ui,sans-serif;
  --font-data:"Barlow Condensed","Barlow",system-ui,sans-serif;

  /* Weights — display runs light to medium, never black */
  --weight-display:300;
  --weight-display-strong:500;
  --weight-label:500;
  --weight-body:400;
  --weight-body-strong:600;

  /* Display / heading scale */
  --text-hero:clamp(48px,7vw,104px);
  --text-h1:clamp(40px,5vw,72px);
  --text-h2:clamp(30px,3.4vw,48px);
  --text-h3:28px;
  --text-h4:21px;

  /* Body + utility */
  --text-lead:20px;
  --text-body:16px;
  --text-body-sm:14px;
  --text-caption:12px;
  --text-label:12px;
  --text-label-lg:14px;

  /* Data readouts (temperatures, minutes, kg) */
  --text-data-xl:64px;
  --text-data-lg:40px;
  --text-data:24px;

  /* Line heights */
  --leading-display:1.0;
  --leading-heading:1.1;
  --leading-body:1.55;
  --leading-tight:1.3;

  /* Tracking — wide letterspaced caps are the brand's signature, from "PRIME FOCUS" */
  --tracking-hero:-0.01em;
  --tracking-display:0.02em;
  --tracking-label:0.24em;
  --tracking-label-tight:0.14em;
  --tracking-body:0;

  /* ===== SPACE — 4px scale, 1320px layout, 128px vertical rhythm ===== */

  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:40px;
  --space-8:56px;
  --space-9:72px;
  --space-10:96px;
  --space-11:128px;
  --space-12:176px;

  /* Layout */
  --layout-max:1320px;
  --layout-max-text:680px;
  --layout-gutter:24px;
  --layout-gutter-lg:56px;
  --section-pad-y:var(--space-11);
  --section-pad-y-sm:var(--space-9);
  --grid-columns:12; /* @kind other */
  --grid-gap:24px;

  /* ===== BORDERS — the brand is square; structure comes from hairlines ===== */

  /* The brand is square. Radii exist for comfort, never for softness. */
  --radius-none:0px;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-pill:999px;

  --border-hairline:1px;
  --border-medium:2px;
  --border-heavy:3px;

  --divider:1px solid var(--border-subtle);
  --divider-strong:1px solid var(--border-strong);
  --rule-accent:2px solid var(--accent);

  /* ===== ELEVATION — flat by default; shadow only for things that truly float ===== */

  /* Flat by default: structure comes from hairlines, not shadow.
     Shadow is reserved for things that genuinely float. */
  --shadow-none:none;
  --shadow-card:0 1px 2px rgba(0,0,0,0.05);
  --shadow-raised:0 8px 24px rgba(0,0,0,0.10);
  --shadow-overlay:0 24px 64px rgba(0,0,0,0.28);
  --shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);

  /* Heat glow — only around live-fire imagery and the accent CTA on dark */
  --glow-flame:0 0 40px rgba(232,109,9,0.35);
  --glow-flame-soft:0 0 80px rgba(232,109,9,0.18);

  /* Protection gradient for type over photography */
  --scrim-bottom:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.45) 40%,rgba(0,0,0,0) 100%); /* @kind other */
  --scrim-left:linear-gradient(to right,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 70%); /* @kind other */
  --scrim-flat:rgba(0,0,0,0.55); /* @kind other */

  /* ===== MOTION — controlled, no bounce, no elastic ===== */

  --duration-instant:80ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --duration-reveal:700ms; /* @kind other */

  /* Controlled, no bounce, no elastic. Heat rises steadily. */
  --ease-standard:cubic-bezier(0.2,0,0.2,1); /* @kind other */
  --ease-out:cubic-bezier(0.16,1,0.3,1); /* @kind other */
  --ease-in:cubic-bezier(0.5,0,1,1); /* @kind other */

  --transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard); /* @kind other */
  --transition-reveal:opacity var(--duration-reveal) var(--ease-out),transform var(--duration-reveal) var(--ease-out); /* @kind other */
}

/* Dark is the brand's primary storytelling ground: fire on black. */
[data-theme="dark"]{
  --surface-page:var(--pf-black);
  --surface-raised:var(--pf-anthracite);
  --surface-muted:var(--pf-carbon);
  --surface-warm:var(--pf-carbon);
  --surface-inverse:var(--pf-white);
  --surface-inverse-raised:var(--pf-grey-100);
  --text-primary:var(--pf-white);
  --text-secondary:var(--pf-grey-200);
  --text-muted:var(--pf-grey-400);
  --text-on-inverse:var(--pf-black);
  --text-on-inverse-muted:var(--pf-grey-600);
  --text-accent:var(--pf-flame);
  --accent:var(--pf-flame);
  --accent-hover:var(--pf-flame-bright);
  --border-subtle:#333333;
  --border-strong:var(--pf-white);
  --border-on-inverse:var(--pf-grey-200);
  --state-hover-tint:rgba(255,255,255,0.06);
  --state-press-tint:rgba(255,255,255,0.12);
}