/* =============================================================
   tokens.css — Design System Tokens | גיל סיטון — מטפלת רגשית
   Palette: Terracotta + Cream + Sage Taupe
   ============================================================= */

:root,
[data-theme="light"] {
  /* Impeccable Premium Palette (OKLCH) */
  --color-primary: oklch(0.68 0.09 45); /* Soft dusty Terracotta */
  --color-primary-hover: oklch(0.63 0.09 45);
  --color-primary-highlight: oklch(0.68 0.09 45 / 0.15);
  --color-bg: oklch(0.98 0.01 80); /* Warm Cream */
  --color-surface: oklch(0.96 0.01 90); /* Soft Sage/Taupe surface */
  --color-surface-2: oklch(0.94 0.02 110);
  --color-surface-offset:  #EFE6DD;
  --color-surface-dynamic: #E8DDD2;
  --color-divider: oklch(0.90 0.02 90);
  --color-border: oklch(0.90 0.02 90);

  /* --- Text --- */
  --color-text: oklch(0.30 0.02 40); /* Deep warm Espresso */
  --color-text-muted: oklch(0.48 0.02 40);
  --color-text-faint: oklch(0.65 0.02 40);
  --color-text-inverse: oklch(0.98 0.01 80);

  /* --- Primary (Terracotta Salmon) --- */
  /* (Legacy HEX values replaced by OKLCH above) */

  /* --- Accent (Sage Taupe) --- */
  --color-accent:           #878778;
  --color-accent-hover:     #6E6E60;
  --color-accent-highlight: #E6E1D8;

  /* --- Semantic --- */
  --color-success: #7A9E7E;
  --color-error:   #C0524B;
  --color-warning: #C4914A;

  /* --- Typography Scale (fluid) --- */
  --text-xs:   clamp(0.78rem, 0.76rem + 0.08vw, 0.86rem);
  --text-sm:   clamp(0.88rem, 0.84rem + 0.16vw, 0.96rem);
  --text-base: clamp(0.98rem, 0.94rem + 0.22vw, 1.06rem);
  --text-lg:   clamp(1.08rem, 1rem + 0.45vw, 1.28rem);
  --text-xl:   clamp(1.3rem,  1.12rem + 0.9vw, 1.72rem);
  --text-2xl:  clamp(1.65rem, 1.24rem + 1.6vw, 2.35rem);
  --text-hero: clamp(2rem,    1.45rem + 2.2vw, 3.05rem);

  --leading-tight:  1.35;
  --leading-snug:   1.55;
  --leading-normal: 1.82;
  --leading-loose:  1.92;

  /* --- Font Families --- */
  --font-display: 'Heebo', 'Assistant', sans-serif;
  --font-body:    'Assistant', 'Segoe UI', Arial, sans-serif;

  /* --- Spacing Scale --- */
  --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;
  --space-32: 8rem;

  /* --- Border Radius --- */
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.25rem;
  --radius-card: 1rem;
  --radius-pill: 9999px;

  /* --- Shadows (architectural, quieter) --- */
  --shadow-sm:  0 2px 10px rgba(45, 35, 32, 0.05);
  --shadow-md:  0 8px 24px rgba(45, 35, 32, 0.06);
  --shadow-lg:  0 14px 34px rgba(45, 35, 32, 0.08);
  --shadow-xl:  0 18px 48px rgba(45, 35, 32, 0.10);

  /* --- Section Spacing --- */
  --space-section:        6rem;
  --space-section-mobile: 3.5rem;

  /* --- Transitions --- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:        350ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring:      500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Layout --- */
  --max-width:        1160px;
  --max-width-narrow: 760px;
  --nav-height:       72px;
}

/* ========================
   Dark Mode
   ======================== */
[data-theme="dark"] {
  --color-bg:              #1F1917;
  --color-surface:         #2A211E;
  --color-surface-2:       #332824;
  --color-surface-offset:  #241D1A;
  --color-surface-dynamic: #3B302B;
  --color-divider:         #4A3A34;
  --color-border:          #5A4740;

  --color-text:            #F5ECE5;
  --color-text-muted:      #C4B2A5;
  --color-text-faint:      #9B8779;
  --color-text-inverse:    #1F1917;

  --color-primary:           #E39A7A;
  --color-primary-hover:     #D88B69;
  --color-primary-active:    #B96E4E;
  --color-primary-highlight: #422C23;

  --color-accent:           #A7A392;
  --color-accent-hover:     #8D8A7A;
  --color-accent-highlight: #302824;

  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.25);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-lg:  0 18px 40px rgba(0, 0, 0, 0.40);
  --shadow-xl:  0 24px 60px rgba(0, 0, 0, 0.50);
}