/* WatWave Media design tokens */

/* --- tokens/fonts.css --- */
/* Watwave Media — Webfonts
 *
 * SF Pro Display / SF Pro Text are Apple proprietary system fonts. On macOS,
 * iOS and Safari the `system-ui, -apple-system` stack in tokens/typography.css
 * resolves to the REAL SF Pro at no download cost.
 *
 * For every other platform we ship Inter (variable, Google Fonts) as the closest
 * open-source equivalent — see readme.md "Font substitution" for the tuning notes
 * (tighten tracking -0.01em at display sizes; drop body line-height ~0.03).
 *
 * >>> SUBSTITUTION FLAG: Inter stands in for SF Pro off-Apple-platforms. If you
 *     hold a licensed SF Pro webfont, drop the .woff2 files in assets/fonts/ and
 *     replace this @import with local @font-face rules. <<<
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");


/* --- tokens/colors.css --- */
/* Watwave Media — Color tokens
 * Apple-inspired "museum gallery" palette. A single Action Blue carries every
 * interactive element; everything else is white, parchment, or near-black.
 */
:root {
  /* ---- Brand / Accent (the only interactive color) ---- */
  --color-primary: #0066cc;          /* Action Blue — every link & pill CTA */
  --color-primary-focus: #0071e3;    /* brighter sibling — focus ring */
  --color-primary-on-dark: #2997ff;  /* Sky Link Blue — links on dark tiles */

  /* ---- Text ---- */
  --color-ink: #1d1d1f;              /* near-black — all headlines & body */
  --color-body: #1d1d1f;
  --color-body-on-dark: #ffffff;
  --color-body-muted: #cccccc;       /* secondary copy on dark tiles */
  --color-ink-muted-80: #333333;     /* body on pearl surfaces */
  --color-ink-muted-48: #7a7a7a;     /* disabled text & fine print */

  /* ---- Surfaces ---- */
  --color-canvas: #ffffff;
  --color-canvas-parchment: #f5f5f7; /* signature Apple off-white */
  --color-surface-pearl: #fafafc;    /* ghost-button fill */
  --color-surface-tile-1: #272729;   /* primary dark tile */
  --color-surface-tile-2: #2a2a2c;   /* micro-step lighter */
  --color-surface-tile-3: #252527;   /* micro-step darker */
  --color-surface-black: #000000;    /* global nav, video void */
  --color-surface-chip-translucent: #d2d2d7; /* used at ~64% alpha over photos */

  /* ---- Hairlines & borders ---- */
  --color-divider-soft: #f0f0f0;     /* soft ring on secondary buttons */
  --color-hairline: #e0e0e0;         /* 1px border on utility cards */

  /* ---- On-color text ---- */
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;

  /* ---- Functional alpha forms (from prose) ---- */
  --color-chip-translucent-64: rgba(210, 210, 215, 0.64);
  --color-divider-alpha: rgba(0, 0, 0, 0.04);
  --color-border-alpha: rgba(0, 0, 0, 0.08);

  /* ---- Semantic aliases ---- */
  --text-heading: var(--color-ink);
  --text-body: var(--color-body);
  --text-muted: var(--color-ink-muted-48);
  --text-link: var(--color-primary);
  --surface-page: var(--color-canvas);
  --surface-alt: var(--color-canvas-parchment);
  --surface-dark: var(--color-surface-tile-1);
  --border-hairline: var(--color-hairline);
}


/* --- tokens/typography.css --- */
/* Watwave Media — Typography tokens
 * SF Pro Display (>=19px headlines) + SF Pro Text (UI/body). On Apple platforms
 * the system stack resolves to the real SF Pro; Inter is the off-system fallback.
 * Negative letter-spacing at display sizes = the signature "tight" headline cadence.
 */
:root {
  /* ---- Families ---- */
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;

  /* ---- Weights (ladder: 300 / 400 / 600 / 700 — 500 is deliberately absent) ---- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Type ramp: size / weight / line-height / letter-spacing ---- */
  --type-hero-display: 600 56px/1.07 var(--font-display);
  --type-hero-display-tracking: -0.28px;

  --type-display-lg: 600 40px/1.10 var(--font-display);
  --type-display-lg-tracking: 0px;

  --type-display-md: 600 34px/1.47 var(--font-text);
  --type-display-md-tracking: -0.374px;

  --type-lead: 400 28px/1.14 var(--font-display);
  --type-lead-tracking: 0.196px;

  --type-lead-airy: 300 24px/1.5 var(--font-text);
  --type-lead-airy-tracking: 0px;

  --type-tagline: 600 21px/1.19 var(--font-display);
  --type-tagline-tracking: 0.231px;

  --type-body-strong: 600 17px/1.24 var(--font-text);
  --type-body-strong-tracking: -0.374px;

  --type-body: 400 17px/1.47 var(--font-text);
  --type-body-tracking: -0.374px;

  --type-dense-link: 400 17px/2.41 var(--font-text);
  --type-dense-link-tracking: 0px;

  --type-caption: 400 14px/1.43 var(--font-text);
  --type-caption-tracking: -0.224px;

  --type-caption-strong: 600 14px/1.29 var(--font-text);
  --type-caption-strong-tracking: -0.224px;

  --type-button-large: 300 18px/1.0 var(--font-text);
  --type-button-large-tracking: 0px;

  --type-button-utility: 400 14px/1.29 var(--font-text);
  --type-button-utility-tracking: -0.224px;

  --type-fine-print: 400 12px/1.0 var(--font-text);
  --type-fine-print-tracking: -0.12px;

  --type-micro-legal: 400 10px/1.3 var(--font-text);
  --type-micro-legal-tracking: -0.08px;

  --type-nav-link: 400 12px/1.0 var(--font-text);
  --type-nav-link-tracking: -0.12px;
}


/* --- tokens/spacing.css --- */
/* Watwave Media — Spacing, radius & elevation tokens
 * Base unit 8px. Structural layout snaps to 8/12/16/24; sub-base values handle
 * tight typographic adjustment. Exactly ONE drop-shadow exists in the system,
 * reserved for product/photographic imagery resting on a surface.
 */
:root {
  /* ---- Spacing ---- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 80px;   /* vertical padding inside a tile */

  /* ---- Radius ---- */
  --radius-none: 0px;      /* full-bleed tiles — color change is the divider */
  --radius-xs: 5px;
  --radius-sm: 8px;        /* dark utility buttons, inline card imagery */
  --radius-md: 11px;       /* pearl-button capsules */
  --radius-lg: 18px;       /* store / utility cards */
  --radius-pill: 9999px;   /* the signature blue pill CTA + search input */
  --radius-full: 9999px;   /* circular control chips */

  /* ---- Elevation ---- */
  --shadow-none: none;
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px; /* the only true shadow */
  --border-hairline-width: 1px;
  --blur-frosted: saturate(180%) blur(20px); /* @kind other */ /* sub-nav & sticky bar */

  /* ---- Motion (system-wide micro-interaction) ---- */
  --press-scale: 0.95; /* @kind other */ /* active/press transform */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 240ms; /* @kind other */

  /* ---- Layout containers ---- */
  --container-text: 980px;   /* text-heavy sections */
  --container-grid: 1440px;  /* product / utility grids */
}