/* ============================================
   Design Tokens
   Palette matches HivRa Studio (Hivra-Studio src/styles/tokens.css),
   which copies the iOS brand colors verbatim.
   ============================================ */

:root {
  /* ── Brand palette ── */
  --color-teal-900: #023D43;
  --color-teal-800: #03474E; /* Studio --brand-teal-strong */
  --color-teal-700: #045A63; /* Studio --brand-teal */
  --color-teal-600: #0B6B72;
  --color-teal-light: #6FB6C1; /* Studio --brand-teal-light */
  --color-teal-tint: #E3F1F3;  /* Studio --brand-teal-tint */

  --color-cream-50:    #FEFAF2; /* Studio --page-cream */
  --color-cream-100:   #FDF5E0; /* Studio --brand-cream */
  --color-warm-light:  #FFE6BF; /* Studio --brand-warm-light */
  --color-gold:        #F1B82D; /* Studio --brand-gold */
  --color-gold-strong: #D9A21F; /* Studio --brand-gold-strong */
  --color-coral:       #F88379; /* Studio --brand-coral */
  --color-mist:        #EEF4F5; /* Studio --muted */

  /* ── Semantic backgrounds ── */
  --color-bg:      var(--color-cream-50);
  --color-bg-soft: var(--color-cream-100);
  --color-bg-mist: var(--color-mist);
  --color-bg-dark: var(--color-teal-700);

  /* ── Text (light sections) ── */
  --color-text-primary:   #10282B; /* Studio --foreground */
  --color-text-secondary: #4F6467; /* Studio --muted-foreground */
  --color-text-muted:     #5B7174;

  /* ── Text (dark sections) ── */
  --color-text-on-dark:       #FFFFFF;
  --color-text-on-dark-soft:  rgba(255, 255, 255, 0.85);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.60);

  /* ── Accents ── */
  --color-accent:      var(--color-gold);
  --color-accent-soft: rgba(255, 249, 239, 0.88); /* Studio --brand-bar; legal summary boxes */
  --color-accent-warm: #8A5A00; /* Studio --status-warning: text on warm/cream */

  /* ── Borders ── */
  --color-border:       #D6E3E5; /* Studio --border */
  --color-border-hover: rgba(4, 90, 99, 0.26);
  --color-border-light: rgba(255, 255, 255, 0.16);
  --color-border-gold:  rgba(241, 184, 45, 0.40);

  /* ── Shadows (Studio elevation) ── */
  --shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md:       0 8px 30px rgba(2, 61, 67, 0.10);
  --shadow-lg:       0 20px 60px rgba(2, 61, 67, 0.17);
  --shadow-card:     0 2px 8px rgba(0, 0, 0, 0.05); /* Studio --shadow-card */
  --shadow-phone:    0 34px 90px rgba(2, 61, 67, 0.22);
  --shadow-elevated: 0 24px 70px rgba(0, 0, 0, 0.22);

  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  --text-display: clamp(3.25rem, 7vw, 6.9rem);
  --text-h1:      clamp(2rem, 4vw, 3.75rem);
  --text-h2:      clamp(1.05rem, 2vw, 1.35rem);
  --text-body:    1rem;
  --text-sm:      0.9rem;
  --text-xs:      0.78rem;
  --text-2xs:     0.7rem;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Layout ── */
  --container-max:     1180px;
  --container-padding: var(--space-6);

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Motion ── */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 360ms ease;
}