/* ==========================================================================
   RASPAO — Design Tokens
   Source of truth: /branding/tokens.css — keep in sync.
   ========================================================================== */

:root {
  --cherry: #E63946;
  --cherry-deep: #B81E2C;
  --cherry-light: #FFD8DC;

  --ice: #EAF6FF;
  --ice-deep: #D3ECFF;
  --syrup-blue: #3FA9F5;
  --lime: #7BC74D;
  --cream: #FFF1C9;

  --bg: var(--ice);
  --bg-deep: var(--ice-deep);
  --surface: #FFFFFF;
  --paper: #F8FCFF;
  --elevated: #FFFFFF;

  --text-primary: #1A1816;
  --text-secondary: #4F5961;
  --text-muted: #7A8790;
  --text-on-cherry: #FFFFFF;

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(26, 24, 22, 0.10);
  --divider: rgba(26, 24, 22, 0.08);

  --brand-gradient: linear-gradient(135deg, #E63946 0%, #3FA9F5 52%, #7BC74D 100%);
  --brand-gradient-reverse: linear-gradient(135deg, #7BC74D 0%, #3FA9F5 48%, #E63946 100%);
  --cherry-gradient: linear-gradient(135deg, #E63946 0%, #B81E2C 100%);
  --warm-gradient: linear-gradient(180deg, #EAF6FF 0%, #FFFFFF 100%);
  --sunset-gradient: linear-gradient(135deg, #E63946 0%, #3FA9F5 100%);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-display: 'Fraunces', Georgia, serif;
  --h1-size: clamp(48px, 7.2vw, 96px);
  --h2-size: clamp(34px, 5vw, 58px);
  --h3-size: clamp(22px, 3vw, 30px);
  --body-size: 17px;
  --small-size: 14px;

  --r-chip: 12px;
  --r-card: 22px;
  --r-hero: 30px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26, 24, 22, 0.05);
  --shadow-md: 0 12px 30px rgba(26, 24, 22, 0.10);
  --shadow-lg: 0 28px 70px rgba(26, 24, 22, 0.13);
  --shadow-cherry: 0 14px 34px rgba(230, 57, 70, 0.28);
  --shadow-blue: 0 14px 34px rgba(63, 169, 245, 0.24);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fast: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur: 0.4s;
  --dur-slow: 0.8s;

  --container: 1180px;
  --nav-height: 72px;
}

::selection {
  background: rgba(230, 57, 70, 0.20);
  color: var(--text-primary);
}