/* Design Tokens — Spacing, Typography, Radius, Shadows
 * Load BEFORE style.css / style-v2.css
 * Adds new tokens only — does NOT override existing ones
 */

:root {
  /* ── Spacing grid (8pt base + 4pt sub-grid) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;

  /* ── Typography scale (iOS SF Pro inspired) ── */
  --text-xs: 10px;
  --text-caption: 12px;
  --text-footnote: 13px;
  --text-subhead: 15px;
  --text-callout: 16px;
  --text-body: 16px;
  --text-body-lg: 17px;
  --text-title3: 20px;
  --text-title2: 22px;
  --text-title1: 28px;
  --text-hero: 34px;
  --text-hero-lg: 60px;

  /* ── Heading sizes (modal titles, section headers) ── */
  --text-h3: 18px;
  --text-h4: 15px;

  /* ── Corner radius (extended from existing --radius-*) ── */
  --radius-pill: 9999px;
  --radius-md: 10px; /* between existing --radius (8px) and --radius-lg (12px) */
  --radius-2xl: 24px; /* extra-large for modals */

  /* ── Shadow elevation (MD3 inspired) ── */
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12); /* between --shadow-sm and --shadow */

  /* ── Z-index stack (single source of truth) ── */
  --z-base: 0;
  --z-content: 10;
  --z-sticky: 50;
  --z-tooltip: 55;
  --z-header: 100;
  --z-overlay: 300;
  --z-modal: 500;
  --z-toast: 9999;

  /* ── Overlay backdrop ── */
  --overlay-bg: rgba(0, 0, 0, 0.7);

  /* ── Touch target minimum ── */
  --touch-min: 44px;

  /* ── Mobile safe area (iOS env fallback) ── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 16px);
  --safe-right: env(safe-area-inset-right, 16px);

  /* ── Transition timing ── */
  --transition-fast: 0.15s;
  --transition-modal: 0.3s;

  /* ── Section header typography (worksheet canvas) ── */
  --sec-font-size: 15px;
  --sec-font-family: 'Quicksand', sans-serif;
  --sec-font-weight: 700;
  --sec-color: #000000;

  /* ── Block tag label (e.g. "True / False" next to section number) ── */
  --block-tag-transform: capitalize;
}

/* ── Mobile: disable 300ms tap delay ── */
html {
  touch-action: manipulation;
}

/* ── iOS: prevent auto-zoom on input focus ── */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}