/*
 * tokens.css — design tokens for menendezmorro.com
 *
 * Single source of truth for colors, typography, spacing, animation, and
 * z-index. Every page-specific stylesheet downstream pulls from these vars
 * instead of hardcoding values. Most values are extracted from the legacy
 * site (BUILD_SPEC.md says the visual baseline is preserved); proposed
 * additions cover gaps where the new spec introduces concepts the legacy
 * site did not have (toast, captions, etc.).
 *
 * Breakpoints (CSS custom properties cannot be used inside @media queries,
 * so the values below are hardcoded at the point of use — this comment is
 * the canonical reference):
 *   600px — Home Info row stacks vertically below this width (BUILD_SPEC §5.1)
 *   768px — Mobile gallery layout; Image fullscreen switches from cover to
 *           contain scaling (BUILD_SPEC §5.2, §5.4)
 */

:root {
  /* ---------- Colors ---------- */
  --color-bg-dark:           #000;
  --color-fg-dark:           #fff;
  --color-bg-light:          #fff;
  --color-fg-light:          #000;
  --color-accent:            #0055ff;
  --project-highlight:       var(--color-accent); /* per-project override set by project.js */
  --dur-highlight:           700ms;               /* page-load fade-in: default blue → project highlight color */
  --color-toast-bg:          rgba(0, 0, 0, 0.85);
  --color-toast-fg:          #fff;

  /* ---------- Typography ---------- */
  --font-primary: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;

  --fs-label:               13px;
  --fs-body:                clamp(15px, 1.1vw, 17px);
  --fs-logo:                20px;
  --fs-cta:                 clamp(18px, 1.6vw, 24px);
  --fs-role:                clamp(20px, 1.8vw, 22px);
  --fs-title:               clamp(28px, 4.7vw, 42px);
  --fs-title-mobile:        50px;
  --fs-project-info-value:  clamp(20px, 1.8vw, 40px);

  --lh-tight: 1.0;
  --lh-snug:  1.15;
  --lh-base:  1.4;

  --ls-label:   1px;
  --ls-display: -0.01em;

  /* ---------- Spacing (8px base) ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ---------- Animation ----------
   * Sweep tokens are shared by both horizontal sweep (between Home covers)
   * and vertical sweep (Home <-> Project / Contact). Verified in the legacy
   * app.js: both directions used the same 1s clip-path transition with the
   * same easing.
   */
  --dur-sweep:        1s;
  --ease-sweep:       cubic-bezier(0.77, 0, 0.175, 1);

  --dur-line-reveal:  0.55s;
  --ease-line-reveal: cubic-bezier(0.33, 1, 0.55, 1);

  --dur-ui:           0.2s;
  --ease-ui:          ease;

  --dur-theme:        0.3s;

  /* ---------- Z-index ----------
   * Gaps left intentionally so new layers can be inserted between existing
   * ones without renumbering every other value.
   */
  --z-content:    1;
  --z-info:      70;   /* static info row, get-in-touch, back arrow */
  --z-header:    80;
  --z-fullscreen: 200;
  --z-toast:    1000;  /* must outrank fullscreen (toast shows over the modal) */
}

/* On mobile the full-page bitmap snapshot is expensive to composite, so
 * the sweep runs shorter and with a gentler ease that hides dropped frames
 * better than the steep desktop curve. */
@media (max-width: 768px) {
  :root {
    --dur-sweep:  600ms;
    --ease-sweep: cubic-bezier(0.4, 0, 0.2, 1);
  }
}