/* =====================================================
   ROSIE'S BEAUTY SPA — DESIGN TOKENS
   Fonts, colors, spacing, radii, safe areas
   ===================================================== */

/* ─── Fonts ─────────────────────────────────────────── */
@font-face {
  font-family: 'Hello Paris Serif';
  src: url('../assets/fonts/HelloParis-Regular.woff') format('woff'),
       url('../assets/fonts/HelloParis-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hello Paris Serif';
  src: url('../assets/fonts/HelloParis-Medium.woff') format('woff'),
       url('../assets/fonts/HelloParis-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hello Paris Serif';
  src: url('../assets/fonts/HelloParis-Bold.woff') format('woff'),
       url('../assets/fonts/HelloParis-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Light Mode Tokens ──────────────────────────────── */
:root {
  /* Colors — Backgrounds */
  --bg-primary:      #F6F2EF;
  --bg-card:         #FFFFFF;
  --bg-hero:         #9B1B21;
  --bg-elevated:     #FFFFFF;
  --bg-input:        rgba(30, 18, 24, 0.05);

  /* Colors — Text */
  --text-primary:    #1E1218;
  --text-secondary:  rgba(30, 18, 24, 0.65);
  --text-tertiary:   rgba(30, 18, 24, 0.55);
  --text-on-accent:  #FFFFFF;

  /* Colors — Accent */
  --accent:          #9B1B21;
  --accent-hover:    #7D1219;
  --accent-subtle:   rgba(155, 27, 33, 0.08);
  --accent-border:   rgba(155, 27, 33, 0.25);

  /* Colors — Warm Palette */
  --warm-beige:      #E7D4CC;
  --warm-beige-dark: #D4B8AC;

  /* Colors — Semantic */
  --success:         #2D8F5C;
  --success-subtle:  rgba(45, 143, 92, 0.08);
  --warning:         #D4852E;
  --warning-subtle:  rgba(212, 133, 46, 0.08);
  --error:           #C43333;
  --error-subtle:    rgba(196, 51, 51, 0.08);

  /* Colors — UI */
  --divider:         rgba(30, 18, 24, 0.06);
  --border:          rgba(30, 18, 24, 0.10);

  /* Shadows */
  --shadow-card:     0 2px 12px rgba(30, 18, 24, 0.08), 0 1px 3px rgba(30, 18, 24, 0.05);
  --shadow-elevated: 0 8px 32px rgba(30, 18, 24, 0.12), 0 2px 8px rgba(30, 18, 24, 0.06);
  --shadow-btn:      0 2px 8px rgba(155, 27, 33, 0.30);

  /* Glass */
  --glass-bg:        rgba(246, 242, 239, 0.80);
  --glass-border:    rgba(246, 242, 239, 0.50);

  /* Hero */
  --bg-hero-end:     #7a1519;
  --shadow-hero:     0 8px 32px rgba(155, 27, 33, 0.35);

  /* Outer (wide-screen background) */
  --bg-outer:        #E8E0DB;

  /* ─── Typography ───────────────────────────────────── */
  --font-heading:    'Hello Paris Serif', Georgia, 'Times New Roman', serif;
  --font-body:       'Futura', 'Century Gothic', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Type Scale */
  --text-large-title:  clamp(28px, 5vw, 34px);
  --text-title1:       clamp(24px, 4vw, 28px);
  --text-title2:       clamp(20px, 3.5vw, 24px);
  --text-title3:       clamp(18px, 3vw, 20px);
  --text-headline:     17px;
  --text-body:         16px;
  --text-callout:      15px;
  --text-subhead:      14px;
  --text-footnote:     13px;
  --text-caption1:     12px;
  --text-caption2:     11px;

  /* ─── Spacing ──────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;

  /* ─── Border Radii ─────────────────────────────────── */
  --radius-card:    16px;
  --radius-button:  12px;
  --radius-input:   12px;
  --radius-pill:    20px;
  --radius-circle:  50%;
  --radius-photo:   14px;
  --radius-sm:      8px;
  --radius-xs:      6px;

  /* ─── Safe Areas ───────────────────────────────────── */
  --safe-top:        env(safe-area-inset-top, 0px);
  --safe-bottom:     env(safe-area-inset-bottom, 0px);
  --safe-left:       env(safe-area-inset-left, 0px);
  --safe-right:      env(safe-area-inset-right, 0px);
  --tab-bar-height:  84px;

  /* ─── Transitions ──────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --spring:             cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Dark Mode Tokens ───────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Backgrounds */
    --bg-primary:      #1E1218;
    --bg-card:         #2A1A22;
    --bg-elevated:     #33202A;
    --bg-input:        rgba(231, 212, 204, 0.08);

    /* Text */
    --text-primary:    #F2EAE5;
    --text-secondary:  rgba(231, 212, 204, 0.65);
    --text-tertiary:   rgba(231, 212, 204, 0.55);
    --text-on-accent:  #FFFFFF;

    /* Accent */
    --accent:          #C4444D;
    --accent-hover:    #D85560;
    --accent-subtle:   rgba(155, 27, 33, 0.15);
    --accent-border:   rgba(196, 68, 77, 0.35);

    /* Warm Palette */
    --warm-beige:      #3A2A32;
    --warm-beige-dark: #4A3240;

    /* Semantic */
    --success:         #3DB874;
    --success-subtle:  rgba(61, 184, 116, 0.12);
    --warning:         #E89B44;
    --warning-subtle:  rgba(232, 155, 68, 0.12);
    --error:           #E05555;
    --error-subtle:    rgba(224, 85, 85, 0.12);

    /* UI */
    --divider:         rgba(231, 212, 204, 0.08);
    --border:          rgba(231, 212, 204, 0.14);

    /* Shadows */
    --shadow-card:     0 2px 12px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
    --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-btn:      0 2px 8px rgba(196, 68, 77, 0.40);

    /* Glass */
    --glass-bg:        rgba(30, 18, 24, 0.85);
    --glass-border:    rgba(231, 212, 204, 0.12);

    /* Hero bg stays dark in dark mode */
    --bg-hero:         #6A1015;
    --bg-hero-end:     #5a1012;
    --shadow-hero:     0 8px 32px rgba(155, 27, 33, 0.2);
    --bg-outer:        #0E080B;
  }
}

/* Dark mode via explicit attribute (user toggle) */
[data-theme="dark"] {
  --bg-primary:      #1E1218;
  --bg-card:         #2A1A22;
  --bg-elevated:     #33202A;
  --bg-input:        rgba(231, 212, 204, 0.08);
  --text-primary:    #F2EAE5;
  --text-secondary:  rgba(231, 212, 204, 0.65);
  --text-tertiary:   rgba(231, 212, 204, 0.55);
  --text-on-accent:  #FFFFFF;
  --accent:          #C4444D;
  --accent-hover:    #D85560;
  --accent-subtle:   rgba(155, 27, 33, 0.15);
  --accent-border:   rgba(196, 68, 77, 0.35);
  --warm-beige:      #3A2A32;
  --warm-beige-dark: #4A3240;
  --success:         #3DB874;
  --success-subtle:  rgba(61, 184, 116, 0.12);
  --warning:         #E89B44;
  --warning-subtle:  rgba(232, 155, 68, 0.12);
  --error:           #E05555;
  --error-subtle:    rgba(224, 85, 85, 0.12);
  --divider:         rgba(231, 212, 204, 0.08);
  --border:          rgba(231, 212, 204, 0.14);
  --shadow-card:     0 2px 12px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-btn:      0 2px 8px rgba(196, 68, 77, 0.40);
  --glass-bg:        rgba(30, 18, 24, 0.85);
  --glass-border:    rgba(231, 212, 204, 0.12);
  --bg-hero:         #6A1015;
  --bg-hero-end:     #5a1012;
  --shadow-hero:     0 8px 32px rgba(155, 27, 33, 0.2);
  --bg-outer:        #0E080B;
}