/**
 * printgift.io — design tokens
 * Modern CSS custom properties for theming and consistency.
 */

:root {
  /* Color — warm, paper-like palette */
  --color-paper: #faf8f5;
  --color-paper-muted: #f0ebe3;
  --color-ink: #1c1917;
  --color-ink-muted: #57534e;
  --color-ink-subtle: #78716c;
  --color-accent: #2d4a3e;
  --color-accent-hover: #3d5f50;
  --color-accent-muted: #e8f0ec;
  --color-border: #d6d3d1;
  --color-border-strong: #a8a29e;
  --color-surface: #ffffff;
  --color-error: #b91c1c;
  --color-error-bg: #fef2f2;
  --color-success: #166534;
  --color-success-bg: #f0fdf4;
  --color-focus: #2563eb;

  /* Typography */
  --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --font-size-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --font-size-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --font-size-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --font-size-3xl: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
  --line-height-tight: 1.2;
  --line-height-base: 1.6;
  --line-height-loose: 1.75;

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

  /* Layout */
  --content-max: 72rem;
  --content-narrow: 40rem;
  --header-height: 4rem;

  /* Shape & elevation */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --shadow-sm: 0 1px 2px rgb(28 25 23 / 6%);
  --shadow-md: 0 4px 16px rgb(28 25 23 / 8%);
  --shadow-lg: 0 12px 40px rgb(28 25 23 / 10%);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: #1c1917;
    --color-paper-muted: #292524;
    --color-ink: #fafaf9;
    --color-ink-muted: #d6d3d1;
    --color-ink-subtle: #a8a29e;
    --color-accent: #6ee7b7;
    --color-accent-hover: #a7f3d0;
    --color-accent-muted: #1a2e26;
    --color-border: #44403c;
    --color-border-strong: #57534e;
    --color-surface: #292524;
    --color-error: #fca5a5;
    --color-error-bg: #450a0a;
    --color-success: #86efac;
    --color-success-bg: #14532d;
    --color-focus: #60a5fa;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 20%);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 30%);
    --shadow-lg: 0 12px 40px rgb(0 0 0 / 40%);
  }
}