/*
 * beddr design tokens — High-Fidelity Claymorphism.
 * Every color, radius, shadow and motion value used on the site lives here,
 * so components never hard-code a one-off value.
 */
:root {
  color-scheme: light;

  /* Canvas & text */
  --clay-canvas: #f4f1fa;
  --clay-foreground: #332f3a;
  --clay-muted: #635f69; /* lightest allowed text color */
  --clay-card-bg: rgba(255, 255, 255, 0.7);
  --clay-card-solid: #ffffff;
  --clay-well: #efebf5; /* recessed surfaces (inputs, tracks) */

  /* Candy-shop accents */
  --clay-accent: #7c3aed;
  --clay-accent-light: #a78bfa;
  --clay-accent-alt: #db2777;
  --clay-sky: #0ea5e9;
  --clay-emerald: #10b981;
  --clay-amber: #f59e0b;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  --grad-violet: linear-gradient(135deg, #c084fc 0%, #9333ea 100%);
  --grad-pink: linear-gradient(135deg, #f472b6 0%, #db2777 100%);
  --grad-sky: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  --grad-emerald: linear-gradient(135deg, #34d399 0%, #059669 100%);
  --grad-amber: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  --grad-blue: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);

  /* Type */
  --font-display: "Nunito", ui-rounded, system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* Radii — nothing below 20px on containers or controls */
  --r-hero: 60px;
  --r-xl: 48px;
  --r-card: 32px;
  --r-md: 24px;
  --r-control: 20px;
  --r-icon: 16px;
  --r-pill: 999px;

  /* The shadow engine: 4-layer stacks */
  --shadow-deep:
    30px 30px 60px #cdc6d9,
    -30px -30px 60px #ffffff,
    inset 10px 10px 20px rgba(139, 92, 246, 0.05),
    inset -10px -10px 20px rgba(255, 255, 255, 0.8);
  --shadow-card:
    16px 16px 32px rgba(160, 150, 180, 0.2),
    -10px -10px 24px rgba(255, 255, 255, 0.9),
    inset 6px 6px 12px rgba(139, 92, 246, 0.03),
    inset -6px -6px 12px rgba(255, 255, 255, 1);
  --shadow-card-hover:
    22px 26px 44px rgba(160, 150, 180, 0.3),
    -12px -12px 28px rgba(255, 255, 255, 0.95),
    inset 6px 6px 12px rgba(139, 92, 246, 0.04),
    inset -6px -6px 12px rgba(255, 255, 255, 1);
  --shadow-button:
    12px 12px 24px rgba(139, 92, 246, 0.3),
    -8px -8px 16px rgba(255, 255, 255, 0.4),
    inset 4px 4px 8px rgba(255, 255, 255, 0.4),
    inset -4px -4px 8px rgba(0, 0, 0, 0.1);
  --shadow-button-hover:
    16px 18px 30px rgba(139, 92, 246, 0.38),
    -8px -8px 16px rgba(255, 255, 255, 0.5),
    inset 4px 4px 8px rgba(255, 255, 255, 0.45),
    inset -4px -4px 8px rgba(0, 0, 0, 0.1);
  --shadow-button-soft:
    10px 10px 22px rgba(160, 150, 180, 0.28),
    -8px -8px 16px rgba(255, 255, 255, 0.9),
    inset 4px 4px 8px rgba(255, 255, 255, 0.9),
    inset -4px -4px 8px rgba(160, 150, 180, 0.12);
  --shadow-pressed:
    inset 10px 10px 20px #d9d4e3,
    inset -10px -10px 20px #ffffff;
  --shadow-orb:
    10px 12px 24px rgba(51, 47, 58, 0.18),
    -6px -6px 14px rgba(255, 255, 255, 0.7),
    inset 5px 5px 10px rgba(255, 255, 255, 0.45),
    inset -5px -5px 10px rgba(0, 0, 0, 0.12);

  /* Motion */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 200ms;
  --t-med: 300ms;
  --t-slow: 500ms;

  /* Layout */
  --page-max: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
}