/*
 * Lilypad design tokens: the ONLY file that holds raw colours, sizes, radii, shadows
 * and timings. app.css and the views use var(--…) only (enforced by tokens.test.ts).
 * Visual language: apple-design skill (system type, grouped surfaces, translucent
 * material bars, instant press feedback, critically-damped motion).
 */
:root {
  color-scheme: light dark;

  /* ── Type ─────────────────────────────────────────────── */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Size, leading and tracking move together: tight and negative as text grows, near 0 for body. */
  --text-caption: 0.75rem;   --leading-caption: 1.35; --tracking-caption: 0.01em;
  --text-footnote: 0.8125rem; --leading-footnote: 1.4; --tracking-footnote: 0.005em;
  --text-subhead: 0.9375rem; --leading-subhead: 1.45; --tracking-subhead: 0;
  --text-body: 1.0625rem;    --leading-body: 1.47;    --tracking-body: -0.006em;
  --text-headline: 1.0625rem; --leading-headline: 1.3; --tracking-headline: -0.01em;
  --text-title3: 1.25rem;    --leading-title3: 1.25;  --tracking-title3: -0.014em;
  --text-title2: 1.375rem;   --leading-title2: 1.2;   --tracking-title2: -0.017em;
  --text-title1: 1.75rem;    --leading-title1: 1.15;  --tracking-title1: -0.02em;
  --text-large: clamp(2rem, 7vw, 2.75rem); --leading-large: 1.08; --tracking-large: -0.025em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Space (rem, so it scales with the reader's text size) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --content-max: 42rem;
  --content-wide: 64rem;
  --tap-min: 2.75rem; /* 44pt */
  --thumb-size: 4.5rem;
  --photo-tile-min: 9rem; /* fits the three 44pt tile buttons; two tiles across a phone */
  --dimmed: 0.55;
  --icon-size: 1.375rem;
  --icon-size-small: 1.125rem;
  --icon-stroke: 1.75;
  --switch-width: 2.75rem;  /* iOS-style toggle */
  --switch-height: 1.625rem;
  --switch-inset: 0.125rem;
  --color-switch-knob: #ffffff; /* white in both modes, as on iOS */
  --tab-bar-height: 3.5rem;

  /* Memory photo grid and full-screen viewer */
  --memory-grid-gap: 2px;
  --color-viewer-bg: #000000;

  /* ── Shape ────────────────────────────────────────────── */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;
  --hairline: 1px;
  --focus-width: 3px;

  /* ── Colour: light ────────────────────────────────────── */
  --color-bg: #f2f2f7;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-fill: rgb(118 118 128 / 0.12);
  --color-fill-strong: rgb(118 118 128 / 0.2);
  --color-text: #1d1d1f;
  --color-text-muted: #6e6e73;
  --color-separator: rgb(60 60 67 / 0.16);
  --color-accent: #0066cc;           /* links and tinted text, 5.6:1 on white */
  --color-accent-fill: #0071e3;      /* filled buttons, white text 4.7:1 */
  --color-on-accent: #ffffff;
  --color-accent-tint: rgb(0 113 227 / 0.1);
  --color-success: #1f7a37;
  --color-success-tint: rgb(36 138 61 / 0.12);
  --color-warning: #a34700;
  --color-warning-tint: rgb(255 149 0 / 0.14);
  --color-danger: #c4001a;
  --color-danger-tint: rgb(255 59 48 / 0.12);
  --color-scrim: rgb(0 0 0 / 0.4);
  --color-print-bg: #ffffff;
  --color-print-text: #000000;

  /* Material: translucent bars that content scrolls under. Bigger surfaces read thicker. */
  --material-bar: rgb(249 249 251 / 0.72);
  --material-blur: saturate(180%) blur(20px);
  --material-edge: rgb(255 255 255 / 0.5);

  /* Shadow by surface size */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 1px 3px rgb(0 0 0 / 0.05), 0 6px 16px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / 0.06), 0 16px 40px rgb(0 0 0 / 0.12);
  --focus-ring: 0 0 0 var(--focus-width) rgb(0 113 227 / 0.4);

  /* ── Motion: near critically damped, no overshoot on things that just appear ── */
  --duration-press: 100ms;
  --duration-fast: 200ms;
  --duration-base: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --press-scale: 0.97;
  --lift-scale: 1.04;
  --lift: -2px;

  --z-header: 20;
  --z-tab-bar: 30;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #000000;
    --color-surface: #1c1c1e;
    --color-surface-raised: #2c2c2e;
    --color-fill: rgb(118 118 128 / 0.24);
    --color-fill-strong: rgb(118 118 128 / 0.36);
    --color-text: #f5f5f7;
    --color-text-muted: #a1a1a6;
    --color-separator: rgb(84 84 88 / 0.6);
    --color-accent: #4aa3ff;
    --color-accent-fill: #0a84ff;
    --color-accent-tint: rgb(10 132 255 / 0.18);
    --color-success: #30d158;
    --color-success-tint: rgb(48 209 88 / 0.16);
    --color-warning: #ffb340;
    --color-warning-tint: rgb(255 159 10 / 0.18);
    --color-danger: #ff6961;
    --color-danger-tint: rgb(255 69 58 / 0.18);
    --material-bar: rgb(22 22 24 / 0.72);
    --material-edge: rgb(255 255 255 / 0.08);
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.5);
    --focus-ring: 0 0 0 var(--focus-width) rgb(10 132 255 / 0.55);
  }
}

/* Reduced transparency: solid bars. More contrast: stronger separators and muted text. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --material-bar: var(--color-surface);
    --material-blur: none;
  }
}
@media (prefers-contrast: more) {
  :root {
    --color-separator: rgb(60 60 67 / 0.5);
    --color-text-muted: #3a3a3c;
    --material-bar: var(--color-surface);
    --material-blur: none;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --color-separator: rgb(235 235 245 / 0.5);
    --color-text-muted: #d1d1d6;
  }
}