/* ========================================================================
   Freedom & Coffee - Design Tokens
   Source: F&C Brandbook + Brand Colors palette (2026-04-18)
   Role: primary palette + type + space + radius for mrdomdeleon.com
         (borrowed from the F&C system; overrides live below)
   ======================================================================== */

:root {
  /* ---------------- Brand colors (raw) ---------------- */
  /* Primary */
  --fc-sapphire: #174DC6;       /* R23  G77  B198 - primary action */
  --fc-aquamarine: #00FCB5;     /* R0   G252 B181 - use on dark only */
  --fc-sea-salt: #EFEFEF;       /* R239 G239 B239 - paper */
  --fc-black: #010101;          /* R1   G1   B1   - ink */

  /* Complementary */
  --fc-scarlet: #F53202;        /* R245 G50  B2 */
  --fc-giants-orange: #FE6627;  /* R254 G102 B39 */
  --fc-selective-yellow: #FFB901; /* R255 G185 B1 */
  --fc-brunswick-green: #01423C;/* R1   G66  B60 */
  --fc-mint: #00C486;           /* R0   G196 B134 */
  --fc-royal-blue: #082566;     /* R8   G37  B102 */
  --fc-persian-pink: #FFBBFC;   /* R255 G187 B252 */
  --fc-beige: #F2F2F6;          /* R242 G242 B246 */
  --fc-lavender: #E8E8F7;       /* R232 G232 B247 */
  --fc-oxford-blue: #04173A;    /* R4   G23  B58 */

  /* ---------------- Semantic roles (light, default) ---------------- */
  --color-paper: var(--fc-sea-salt);   /* background */
  --color-ink: var(--fc-black);        /* primary text */
  --color-ink-muted: #4A4A4A;          /* secondary text ~65% ink */
  --color-ink-subtle: #8A8A8A;         /* tertiary text ~45% ink */
  --color-rule: #D9D9D9;               /* hairlines */
  --color-accent: var(--fc-sapphire);  /* links, focus */
  --color-accent-ink: var(--fc-sea-salt); /* text on accent */
  --color-spark: var(--fc-aquamarine); /* rare accent - on dark only */
  --color-surface: #FFFFFF;            /* raised cards (slightly brighter than paper) */
  --color-overlay: rgba(1, 1, 1, 0.55);/* video hero text-protect scrim */
  --color-focus: var(--fc-sapphire);

  /* ---------------- Typography ---------------- */
  --font-display: "Marlide Display", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Handjet", "Marlide Display", serif; /* reserve for labels, numerals */

  /* Fluid type scale - clamp(min, vw-scale, max) */
  --text-hero: clamp(3.75rem, 2rem + 7vw, 8rem);   /* 60 → 128 px */
  --text-h1:   clamp(2.5rem, 1.5rem + 4vw, 4.5rem);/* 40 → 72 px */
  --text-h2:   clamp(1.875rem, 1.25rem + 2.5vw, 3rem); /* 30 → 48 px */
  --text-h3:   clamp(1.375rem, 1rem + 1.5vw, 2rem);    /* 22 → 32 px */
  --text-lead: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); /* 18 → 21 px */
  --text-body: 1rem;                             /* 16 px */
  --text-small: 0.875rem;                        /* 14 px */
  --text-caption: 0.75rem;                       /* 12 px */

  /* Line heights */
  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.08em;   /* Manrope ALL-CAPS labels */
  --ls-hero: -0.03em;  /* Marlide big display */

  /* Font weights (named) */
  --fw-display-regular: 400;
  --fw-display-bold: 700;
  --fw-display-heavy: 800;
  --fw-body-light: 300;
  --fw-body-regular: 400;
  --fw-body-medium: 500;
  --fw-body-semibold: 600;
  --fw-body-bold: 700;

  /* ---------------- Spacing (4px baseline) ---------------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-24: 6rem;    /* 96 */
  --space-32: 8rem;    /* 128 */
  --space-48: 12rem;   /* 192 */

  /* Layout */
  --container-max: 1440px;
  --container-pad: clamp(1rem, 4vw, 3rem);
  --grid-gap: clamp(1rem, 2vw, 1.5rem);

  /* ---------------- Radius ---------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;   /* work cards - "round slightly, not unfinished rectangles" */
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* ---------------- Borders / strokes ---------------- */
  --stroke-thin: 1px;
  --stroke-mid: 1.5px;
  --stroke-bold: 2px;

  /* ---------------- Shadows (restrained) ---------------- */
  --shadow-card: 0 1px 2px rgba(1,1,1,0.04), 0 8px 24px rgba(1,1,1,0.06);
  --shadow-lift: 0 2px 4px rgba(1,1,1,0.06), 0 24px 48px rgba(1,1,1,0.10);

  /* ---------------- Motion ---------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-mid: 280ms;
  --dur-slow: 520ms;
  --dur-hero: 900ms;

  /* ---------------- Focus ring (a11y) ---------------- */
  --ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 45%, transparent);
}

/* Dark mode - flips paper/ink, promotes Aquamarine to accent per brand rule */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: var(--fc-black);
    --color-ink: var(--fc-sea-salt);
    --color-ink-muted: #B5B5B5;
    --color-ink-subtle: #7F7F7F;
    --color-rule: #262626;
    --color-accent: var(--fc-aquamarine);       /* "Aquamarine should be used on Black" */
    --color-accent-ink: var(--fc-black);
    --color-spark: var(--fc-persian-pink);
    --color-surface: #0A0A0A;
    --color-overlay: rgba(1, 1, 1, 0.55);
    --color-focus: var(--fc-aquamarine);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-mid: 0ms;
    --dur-slow: 0ms;
    --dur-hero: 0ms;
  }
}

/* ========================================================================
   Base typography - opinionated defaults that use the tokens above
   ======================================================================== */

html { color-scheme: light dark; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  font-weight: var(--fw-display-regular);
  color: var(--color-ink);
  margin: 0;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: var(--ls-tight); }

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  font-weight: var(--fw-display-regular);
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--lh-snug);
  color: var(--color-ink-muted);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-body-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-subtle);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  text-underline-offset: 0.15em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration: underline; }
a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }

::selection { background: var(--color-accent); color: var(--color-accent-ink); }