/* Design tokens — synthesized from Figma file Uk3dokjsynHWKljmN0s9oA */

:root {
  /* ---------- Base palette ---------- */
  --color-cream: #FFFFF8;      /* warm off-white — dominant page bg */
  --color-black: #000000;
  --color-near-black: #231F20;
  --color-white: #FFFFFF;

  /* ---------- Typography ---------- */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Type scale — pulled from Figma. Using clamp() to handle desktop→mobile. */
  --fs-display-xl: clamp(40px, 4.4vw, 64px);    /* hero TITLE (WORKS on home) */
  --fs-display-lg: clamp(32px, 3.3vw, 48px);    /* H1, section display */
  --fs-display-md: clamp(28px, 2.5vw, 36px);    /* H2 */
  --fs-stat:       clamp(56px, 6.7vw, 96px);    /* giant stats */
  --fs-h3:         clamp(18px, 1.7vw, 24px);    /* nav, buttons, chips */
  --fs-body:       clamp(15px, 1.2vw, 17px);    /* body copy */
  --fs-meta:       clamp(13px, 1vw, 15px);      /* captions, eyebrows */

  /* Line heights — tight display, comfortable body */
  --lh-display-tight: 1.0;       /* big display */
  --lh-display-loose: 1.36;      /* section display H2 */
  --lh-display-xloose: 2.42;     /* 116/48 ExtraBold display */
  --lh-h3: 1.25;
  --lh-body: 1.47;

  /* ---------- Spacing ---------- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  96px;
  --space-2xl: 160px;
  --space-3xl: 240px;

  /* ---------- Layout ---------- */
  --grid-max: 1440px;
  --grid-gutter: clamp(24px, 7.6vw, 110px);     /* matches 110px in Figma at desktop */
  --grid-gutter-tight: clamp(14px, 1vw, 14px);  /* nav padding */
  --nav-height: clamp(64px, 12.5vw, 181px);     /* 181 at desktop, ~64 mobile */

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);       /* snappy ease-out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 0.3s;
  --dur-med:  0.6s;
  --dur-slow: 1.2s;

  /* ---------- Page-level theme (default = cream light theme) ---------- */
  --surface: var(--color-cream);
  --ink: var(--color-black);
  --ink-subtle: rgba(0, 0, 0, 0.6);
  --nav-surface: var(--color-black);
  --nav-ink: var(--color-white);
  --accent: var(--color-black);
  --accent-ink: var(--color-white);
}

/* ---------- Per-page themes ----------
   Set by adding body.page-<name> in HTML.
   Each case study defines its own world. */

/* Home: inverted — black canvas, white ink, colored tiles */
body.page-home {
  --surface: var(--color-black);
  --ink: var(--color-white);
  --ink-subtle: rgba(255, 255, 255, 0.7);
  --nav-surface: var(--color-black);
  --nav-ink: var(--color-white);
  --accent: var(--color-white);
}

/* About / Connect — cream + teal */
body.page-about {
  --surface: var(--color-cream);
  --ink: var(--color-black);
  --ink-subtle: rgba(0, 0, 0, 0.6);
  --nav-surface: var(--color-black);
  --nav-ink: var(--color-white);
  --accent: #62C8D0; /* Midday teal — also Iluminar cyan */
}

/* Iluminar — navy + brand yellow */
body.page-iluminar {
  --surface: var(--color-cream);
  --ink: var(--color-near-black);
  --ink-subtle: rgba(35, 31, 32, 0.65);
  --nav-surface: #2B338E;
  --nav-ink: var(--color-cream);
  --accent: #2B338E;     /* Late Night Blue */
  --accent-2: #FFDD00;   /* Late Morning yellow */
  --accent-3: #62C8D0;   /* Midday cyan */
  --accent-4: #CAC6E3;   /* Lilac */
}

/* Shadow Girl — charcoal + magenta + violet/indigo sky */
body.page-shadow-girl {
  --surface: var(--color-cream);
  --ink: #39393D;
  --ink-subtle: rgba(57, 57, 61, 0.65);
  --nav-surface: #000000;
  --nav-ink: var(--color-white);
  --accent: #B32BAA;     /* magenta (active state) */
  --accent-2: #7077FF;   /* sky gradient start */
  --accent-3: #363795;   /* sky gradient end */
}

/* LaBarre — cream stage + oxblood accent */
body.page-labarre {
  --surface: #EFEBDC;
  --ink: var(--color-black);
  --ink-subtle: rgba(0, 0, 0, 0.6);
  --nav-surface: #4B0005;
  --nav-ink: #EFEBDC;
  --accent: #4B0005;     /* Chocolate Velvet */
  --accent-2: #5B8D8D;   /* Grecian Coast */
  --accent-3: #8DA33C;   /* Olive */
  --accent-4: #004200;   /* Everglades */
}

/* Olive Bar — cream + moody black sections + tan */
body.page-olive-bar {
  --surface: var(--color-cream);
  --ink: var(--color-black);
  --ink-subtle: rgba(0, 0, 0, 0.6);
  --nav-surface: #C88E36;
  --nav-ink: var(--color-black);
  --accent: #C88E36;     /* tan */
  --accent-2: #66141A;   /* Deep Beet */
  --accent-3: #367363;   /* Blue Cheese */
  --accent-4: #F3D897;   /* Tortilla */
}

/* Small Bids — cream + pink nav + bold palette */
body.page-small-bids {
  --surface: var(--color-cream);
  --ink: var(--color-black);
  --ink-subtle: rgba(0, 0, 0, 0.6);
  --nav-surface: #F392BD;
  --nav-ink: var(--color-black);
  --accent: #ED1C24;     /* red */
  --accent-2: #F392BD;   /* pink */
  --accent-3: #008160;   /* emerald */
  --accent-4: #105245;   /* deep teal */
}