/* ==========================================================================
   Slicium — Design Tokens (single source of truth)
   Apple Premium Minimal design system · light, calm, high-contrast
   Brand accent: deep protein red + steel neutrals
   Change --accent-* to rebrand the entire site.
   ========================================================================== */

:root {
  /* ---- Background panels (page + section alternation) ---- */
  --bg-canvas:   #fbfbfd;
  --bg-white:    #ffffff;
  --bg-muted:    #f5f5f7;
  --bg-tint:     #fdf4f5;

  /* ---- Surfaces (cards on top of panels) ---- */
  --surface:        #ffffff;
  --surface-muted:  #f5f5f7;
  --surface-raised: #ffffff;
  --surface-glass:  rgba(255, 255, 255, 0.72);
  --surface-ink:    #16161a;

  /* ---- Text ramp ---- */
  --text-primary:   #1d1d1f;
  --text-secondary: #424245;
  --text-muted:     #6e6e73;
  --text-faint:     #86868b;
  --text-on-accent: #ffffff;
  --text-on-ink:    #f5f5f7;

  /* ---- Hairlines (cards/inputs/in-component only — never between sections) ---- */
  --border-subtle:  rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.10);
  --border-strong:  rgba(0, 0, 0, 0.16);
  --ring:           #a3122b;

  /* ---- Accent — Slicium protein red ---- */
  --accent:       #a3122b;
  --accent-hover: #b7182f;
  --accent-press: #8c0f24;
  --accent-link:  #9c1129;
  --accent-soft:  rgba(163, 18, 43, 0.09);
  --accent-ring:  rgba(163, 18, 43, 0.28);

  /* ---- Steel (secondary brand neutral) ---- */
  --steel:        #4a5560;
  --steel-soft:   rgba(74, 85, 96, 0.10);

  /* ---- Semantic ---- */
  --success: #1d9d57;  --success-soft: rgba(29, 157, 87, 0.12);
  --warning: #b25e00;  --warning-soft: rgba(178, 94, 0, 0.12);
  --error:   #d70015;  --error-soft:   rgba(215, 0, 21, 0.12);
  --info:    #0071e3;  --info-soft:    rgba(0, 113, 227, 0.12);

  /* ---- Gradients (subtle, rare) ---- */
  --grad-soft:   linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
  --grad-accent: linear-gradient(135deg, #a3122b 0%, #d94a5e 100%);
  --grad-hero:   radial-gradient(58% 68% at 50% 0%, rgba(163, 18, 43, 0.10) 0%, transparent 62%);
  --grad-text:   linear-gradient(90deg, #1d1d1f 0%, #a3122b 100%);

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12);

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "SF Mono", "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-display: clamp(2.5rem, 1.2rem + 6.2vw, 5rem);
  --fs-h1:      clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
  --fs-h2:      clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
  --fs-h3:      clamp(1.3125rem, 1.1rem + 1vw, 1.75rem);
  --fs-h4:      clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --fs-lead:    clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-body:    1.0625rem;
  --fs-body-lg: 1.1875rem;
  --fs-small:   0.9375rem;
  --fs-micro:   0.8125rem;

  /* ---- Spacing (4-pt base / 8-pt rhythm) ---- */
  --space-0: 0;      --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;   --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
  --space-10: 40px;  --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px;  --space-28: 112px; --space-32: 128px; --space-40: 160px;

  /* ---- Radii ---- */
  --radius-sm: 10px;  --radius-md: 14px;  --radius-lg: 18px;
  --radius-xl: 24px;  --radius-2xl: 32px; --radius-pill: 980px;

  /* ---- Containers ---- */
  --container-sm: 692px;   --container-md: 820px;   --container-lg: 980px;
  --container-xl: 1120px;  --container-2xl: 1280px;
  --gutter: clamp(22px, 5vw, 48px);

  /* ---- Section rhythm ---- */
  --section-y: clamp(72px, 9vw, 140px);
  --section-y-lg: clamp(104px, 13vw, 200px);
  --stack: clamp(16px, 2vw, 24px);

  /* ---- Grid ---- */
  --grid-cols: 12;
  --grid-gap: clamp(20px, 2.4vw, 32px);

  /* ---- Motion ---- */
  --dur-fast: 150ms;  --dur-base: 250ms;  --dur-slow: 400ms;  --dur-slower: 700ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);

  /* ---- Layout constants ---- */
  --nav-h: 52px;
}