/* Hallmark · locked system · genre: modern-minimal · theme: Precision (silver / graphite / blue)
 * axes: light / grotesk-sans / cool
 * vibe: concise · clear · premium restraint
 * source: src/home.ts (Drop product surface)
 */

:root {
  /* Prefer SF on Apple; Space Grotesk elsewhere */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Segoe UI', ui-sans-serif, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Segoe UI', ui-sans-serif, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', monospace;

  /* Near-white canvas · hairline structure · near-black type */
  --color-paper: oklch(99.4% 0.001 260);
  --color-paper-2: oklch(96.8% 0.002 260);
  --color-paper-3: oklch(94.2% 0.003 260);
  --color-ink: oklch(17.5% 0.004 260);
  --color-ink-2: oklch(34% 0.006 260);
  --color-neutral: oklch(50% 0.008 270);
  --color-muted: oklch(49% 0.008 270);
  --color-rule: oklch(92% 0.002 260);
  --color-rule-2: oklch(86.5% 0.003 260);

  /* Apple Blue — clear CTA, not chrome */
  --color-accent: oklch(54% 0.19 250);
  --color-accent-hover: oklch(48% 0.185 250);
  --color-accent-ink: oklch(100% 0 0);
  --color-focus: oklch(54% 0.19 250);

  --color-success: oklch(55% 0.14 150);
  --color-success-light: oklch(97% 0.02 150);
  --color-error: oklch(55% 0.2 25);
  --color-warn: oklch(68% 0.14 75);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-md: 1.1875rem;
  --text-lg: 1.375rem;
  --text-xl: 1.625rem;
  --text-2xl: 2.125rem;
  --text-display: clamp(2.25rem, 5vw, 4rem);

  --radius: 14px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  /* Apple-like spring + soft ambient depth */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --dur-short: 220ms;
  --dur-long: 480ms;
  --shadow-sm: 0 1px 2px color-mix(in oklch, var(--color-ink) 5%, transparent),
               0 1px 1px color-mix(in oklch, var(--color-ink) 3%, transparent);
  --shadow-md: 0 2px 8px color-mix(in oklch, var(--color-ink) 5%, transparent),
               0 18px 48px color-mix(in oklch, var(--color-ink) 6%, transparent);
  --shadow-lg: 0 4px 16px color-mix(in oklch, var(--color-ink) 6%, transparent),
               0 28px 72px color-mix(in oklch, var(--color-ink) 8%, transparent);
  --highlight-inset: inset 0 1px 0 color-mix(in oklch, white 72%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: oklch(12% 0.004 260);
    --color-paper-2: oklch(16.5% 0.005 260);
    --color-paper-3: oklch(21% 0.006 260);
    --color-ink: oklch(98% 0.002 260);
    --color-ink-2: oklch(86% 0.004 260);
    --color-neutral: oklch(72% 0.006 270);
    --color-muted: oklch(62% 0.006 270);
    --color-rule: oklch(28% 0.006 260);
    --color-rule-2: oklch(34% 0.007 260);

    --color-accent: oklch(68% 0.16 250);
    --color-accent-hover: oklch(74% 0.14 250);
    --color-accent-ink: oklch(12% 0.004 260);
    --color-focus: oklch(68% 0.16 250);

    --color-success: oklch(72% 0.14 150);
    --color-success-light: oklch(22% 0.03 150);
    --color-error: oklch(70% 0.17 25);
    --color-warn: oklch(78% 0.12 75);

    --highlight-inset: inset 0 1px 0 color-mix(in oklch, white 14%, transparent);
    --shadow-sm: 0 1px 2px color-mix(in oklch, black 28%, transparent);
    --shadow-md: 0 2px 10px color-mix(in oklch, black 28%, transparent),
                 0 18px 48px color-mix(in oklch, black 32%, transparent);
    --shadow-lg: 0 4px 18px color-mix(in oklch, black 30%, transparent),
                 0 28px 72px color-mix(in oklch, black 36%, transparent);
  }
}

/* Precision additions: semantic surfaces, shared across product routes. */
:root {
  --color-canvas: oklch(97% 0.002 260);
  --color-glass: color-mix(in oklch, var(--color-paper) 86%, transparent);
  --color-warn-text: oklch(46% 0.11 65);
  --color-error-surface: color-mix(in oklch, var(--color-error) 6%, var(--color-paper));
  --color-backdrop: oklch(18% 0.01 260 / .3);
  --radius-pill: 999px;
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas: oklch(9% 0.003 260);
    --color-warn-text: oklch(80% 0.1 65);
    --color-backdrop: oklch(4% 0.002 260 / .65);
  }
}