/* Atelier Azure — design tokens. Single source of truth; every stylesheet consumes these. */
:root {
  color-scheme: light;

  /* Surfaces — warm paper white, never pure #fff for large areas */
  --paper: #fbfcfd;
  --surface: #ffffff;
  --mist: #f1f5f9;
  --haze: #e6eef5;
  --sand: #f7efe4;          /* summer warmth, used sparingly */

  /* Ink — deep sea navy instead of black */
  --ink: #0a1a2b;
  --ink-2: #44566a;
  --ink-3: #8394a6;
  --hairline: rgba(10, 26, 43, 0.08);
  --hairline-strong: rgba(10, 26, 43, 0.14);

  /* Azure scale */
  --azure-900: #06325e;
  --azure-700: #0a5cb0;
  --azure-600: #0b6bcb;      /* primary action */
  --azure-500: #1e8cf0;
  --azure-300: #7cc4ff;
  --azure-100: #e3f2ff;
  --azure-50:  #f2f9ff;
  --lagoon: #34c3d6;         /* turquoise highlight */
  --sun: #ffc867;            /* tiny warm accents only */

  --focus-ring: 0 0 0 4px rgba(30, 140, 240, 0.28);

  /* Typography — Apple system stack + Apple's serif "New York" for editorial moments */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, "New York", "Iowan Old Style", "Source Serif 4", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale (HIG-inspired: large title → caption) */
  --fs-hero: clamp(3rem, 8.4vw, 7.5rem);
  --fs-display: clamp(2.25rem, 5vw, 4.25rem);
  --fs-title: clamp(1.75rem, 3vw, 2.5rem);
  --fs-headline: 1.3125rem;
  --fs-body: 1.0625rem;      /* 17pt — iOS body */
  --fs-callout: 0.9375rem;
  --fs-footnote: 0.8125rem;
  --fs-caption: 0.75rem;
  --tracking-tight: -0.022em;
  --tracking-display: -0.035em;

  /* Spacing (8pt grid) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --maxw: 1280px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Radii (continuous-corner feel) */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;

  /* Elevation — layered, low-opacity, blue-tinted (apply only on shapes/backgrounds) */
  --shadow-1: 0 1px 2px rgba(6, 50, 94, 0.06), 0 2px 8px rgba(6, 50, 94, 0.05);
  --shadow-2: 0 2px 6px rgba(6, 50, 94, 0.06), 0 12px 32px rgba(6, 50, 94, 0.09);
  --shadow-3: 0 8px 20px rgba(6, 50, 94, 0.08), 0 32px 80px rgba(6, 50, 94, 0.16);

  /* Materials (Apple-style translucent glass) */
  --glass: rgba(251, 252, 253, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --glass-blur: saturate(180%) blur(20px);

  /* Motion — iOS sheet curve + spring presets (for Motion: { type: "spring", ...preset }) */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 160ms; --dur-2: 280ms; --dur-3: 480ms; --dur-4: 800ms;

  --z-header: 50; --z-sheet: 80; --z-cart: 90; --z-toast: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}