/* tokens.css — French Glow design system.
   Direction: Apple-style minimalism. White canvas, one blue accent, a
   neutral grey ramp, generous whitespace, large radii, soft low-contrast
   elevation. Names map 1:1 onto the Tailwind v4 @theme tokens the .astro
   components reference, so this ports straight into the real build. */

:root {
  /* ── colour: white / black / grey / blue only ────────────── */
  --white: #ffffff;
  --black: #000000;

  /* neutral ramp — cool greys, Apple-style */
  --grey-50:  #f5f5f7;   /* section fills, media wells   */
  --grey-100: #e8e8ed;   /* dividers on white           */
  --grey-200: #d2d2d7;   /* borders, disabled            */
  --grey-400: #86868b;   /* secondary text               */
  --grey-600: #424245;   /* body text                    */
  --grey-900: #1d1d1f;   /* headings                     */

  --blue:      #0071e3;   /* primary action (Apple blue)  */
  --blue-hover:#0077ed;
  --blue-deep: #0056b3;
  --blue-tint: #e8f1fd;   /* selected chip, info fills     */

  /* semantic aliases used across the stylesheets */
  --canvas:  var(--white);
  --surface: var(--white);
  --ink:     var(--grey-900);
  --muted:   var(--grey-600);
  --subtle:  var(--grey-400);
  --line:    var(--grey-100);
  --border:  var(--grey-200);
  --accent:  var(--blue);
  --charcoal:var(--black);

  /* ── radius ─────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;   /* cards  */
  --radius-xl: 28px;   /* hero media, large panels */
  --radius-pill: 980px;

  /* ── elevation: soft, layered, never harsh ───────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.12);

  /* ── glass (kept for the video facade only) ─────────────── */
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-blur: 18px;

  /* ── motion: Apple-ish easing, quick and decisive ────────── */
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 620ms;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── type: Google Sans throughout ───────────────────────── */
  --font-sans: "Google Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Google Sans has no true italic; keep display type upright. */
  --font-display: var(--font-sans);

  /* Optical sizes, tuned per device class (see breakpoints below) */
  --text-display: clamp(2.5rem, 6.5vw, 4.5rem);
  --text-title:   clamp(1.75rem, 3.6vw, 2.75rem);
  --text-head:    clamp(1.25rem, 2.2vw, 1.75rem);
  --text-body:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;

  /* ── rhythm ─────────────────────────────────────────────── */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --maxw: 1200px;
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --tap: 44px; /* WCAG 2.5.5 minimum touch target */
}

/* ══ device classes ═══════════════════════════════════════
   iPhone      375–430px  — 1 col, stacked, 44px targets
   iPad        768–1024px — 2 col, 2-up hero
   13" laptop  1280–1470px— 4 col, max-width capped at 1200
   ------------------------------------------------------------ */

@media (min-width: 768px) {
  :root {
    --gutter: 2.5rem;
    --text-body: 1.0625rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 3rem;
  }
}

/* 13" MacBook Pro (1440x900 logical) and larger */
@media (min-width: 1280px) {
  :root {
    --maxw: 1200px;
    --text-display: 4.5rem;
    --text-title: 2.75rem;
    --text-head: 1.75rem;
  }
}