/* ==========================================================================
   Panelicious — Design Tokens
   Colours, type, spacing, radii. Sourced directly from the brand guidelines.
   ========================================================================== */

:root {
  /* --- Brand palette (strict priority: primary, accent, mono) --- */
  --red:       #E00700; /* primary — action, energy, promotions. Leads. */
  --purple:    #4A2F46; /* primary — depth, secondary emphasis */
  --darkgrey:  #24272C; /* primary — dark surfaces + text */
  --offwhite:  #FAF7F5; /* primary — light surfaces (warm, not pure white) */
  --pink:      #E31A82; /* accent — one highlight per panel, max. Never body copy. */
  --orange:    #FB471F; /* accent — one highlight per panel, max. Never body copy. */
  --black:     #000000; /* logo/print only */
  --white:     #FFFFFF; /* logo/print only */

  /* --- Semantic roles --- */
  --bg:            var(--offwhite);
  --bg-dark:       var(--darkgrey);
  --ink:           var(--darkgrey);      /* body text on light */
  --ink-dim:       #5a5f66;              /* muted body on light */
  --ink-invert:    var(--offwhite);      /* text on dark */
  --ink-invert-dim:rgba(250,247,245,0.62);
  --accent:        var(--red);

  /* Hairlines — the "screen bezel" 1px rule */
  --hairline:        rgba(36,39,44,0.14);
  --hairline-strong: rgba(36,39,44,0.24);
  --hairline-dark:   rgba(250,247,245,0.14);
  --hairline-dark-strong: rgba(250,247,245,0.24);

  /* Panel surfaces */
  --panel-bg:       var(--white);
  --panel-bg-dark:  #2b2f35;
  --panel-border:   var(--hairline);

  /* --- Typography --- */
  --font-display: 'Michroma', system-ui, sans-serif; /* headings only */
  --font-body:    'Varela', system-ui, sans-serif;   /* sub-heads + body */
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale. Michroma is a WIDE face, so display sizes stay
     restrained — big enough to lead, small enough for multi-word headlines. */
  --fs-display: clamp(2rem, 1.25rem + 2.6vw, 3.35rem);   /* H1 ~32–54px */
  --fs-h2:      clamp(1.5rem, 1.15rem + 1.35vw, 2.15rem);/* ~24–34px */
  --fs-h3:      clamp(1.12rem, 1rem + 0.55vw, 1.4rem);   /* ~18–22px */
  --fs-lead:    clamp(1.06rem, 0.98rem + 0.4vw, 1.3rem); /* sub-head 17–21px */
  --fs-body:    1.0625rem;                                /* 17px */
  --fs-small:   0.9rem;
  --fs-mono:    0.72rem;                                  /* "screen_NN · synced" */

  --lh-display: 1.14;
  --lh-body:    1.6;
  --ls-display: 0.005em;
  --ls-mono:    0.08em;
  --ls-eyebrow: 0.16em;

  /* --- Spacing & layout --- */
  --container:      1200px;
  --container-wide: 1320px;
  --pad-x:          clamp(1.25rem, 4vw, 2.5rem);
  --section-y:      clamp(3.75rem, 2.5rem + 5vw, 6.5rem);
  --gap:            clamp(1rem, 0.7rem + 1vw, 1.5rem);
  --gap-lg:         clamp(1.5rem, 1rem + 1.5vw, 2.25rem);

  /* --- Radii (precise, not cute) --- */
  --radius:    10px;
  --radius-sm: 7px;
  --radius-lg: 14px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --dur:  0.5s;

  /* --- Elevation (used sparingly; brand forbids heavy shadows) --- */
  --shadow-soft: 0 1px 2px rgba(36,39,44,0.05), 0 8px 24px rgba(36,39,44,0.06);
}