/* ==========================================================================
   Asal Dabbaghchian — Design Tokens
   Extracted from ASAL-SITE-COMPLETE.txt (single source of truth)
   ========================================================================== */

:root {
  /* ── Colors — Global Base (light-forward) ──────────────────────────────── */
  --color-bg: #FAF8F5;               /* warm off-white, high-quality paper */
  --color-surface: #FFFFFF;           /* pure white cards/panels */
  --color-surface-2: #F5F0EB;        /* warm grey for section alternates */
  --color-noir: #1A1118;              /* deep plum-black for hero/dark accents */
  --color-text: #1A1118;              /* primary text on light backgrounds */
  --color-text-inv: #FAF8F5;          /* text on dark backgrounds */
  --color-fg: #1A1118;                /* legacy alias */
  --color-muted: #6A5E5A;            /* warm brown-grey — 5.89:1 on #FAF8F5 (WCAG AA+) */
  --color-divider: #E8E0D8;          /* warm light divider */
  --color-border: #E8E0D8;           /* alias for divider */
  --color-success: #4A7C59;
  --color-error: #B5403A;

  /* ── Accent Palette (per page) ───────────────────────────────────────── */
  --color-accent: #C9956A;            /* warm terracotta — homepage default */
  --color-accent-home: #C9956A;       /* terracotta */
  --color-accent-model: #B8860B;      /* dark gold — runway/fashion */
  --color-accent-ugc: #C97B8A;        /* dusty rose — content/social */
  --color-accent-ent: #8B6BAE;        /* soft mauve-purple — film/music */
  --color-accent-links: #6B9EAE;      /* dusty teal — links/contact */
  --color-accent-hover: #B07E55;
  --color-accent-active: #9A6B45;

  /* ── Gradients ───────────────────────────────────────────────────────── */
  --gradient-hero: linear-gradient(135deg, #2D1B2E 0%, #1A1118 60%, #3D1F1F 100%);
  --gradient-section-warm: linear-gradient(180deg, #FAF8F5 0%, #F0E8E0 100%);
  --gradient-accent: linear-gradient(135deg, #C9956A, #C97B8A);
  --gradient-gold: linear-gradient(135deg, #B8860B, #D4A836);
  --gradient-rose: linear-gradient(135deg, #C97B8A, #E8A0B0);
  --gradient-mauve: linear-gradient(135deg, #8B6BAE, #A888C8);

  /* ── Type Scale (fluid clamp) ──────────────────────────────────────────── */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);        /* 12–14px */
  --text-sm: clamp(0.875rem, 0.82rem + 0.3vw, 1rem);            /* 14–16px */
  --text-base: clamp(1rem, 0.925rem + 0.35vw, 1.125rem);        /* 16–18px, ≥17px at 768px+ */
  --text-lg: clamp(1.1rem, 1rem + 0.75vw, 1.5rem);              /* 17.6–24px */
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.8rem, 2rem + 7vw, 10rem);                /* ≥2.8rem mobile */

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /*
   * Usage rules:
   * Hero name        → Cormorant Garamond, --text-hero, weight 300
   * Section headers  → Cormorant Garamond, --text-3xl, weight 300
   * Subsection ital  → Cormorant Garamond, --text-xl, weight 400 italic
   * Pillar labels    → Cormorant Garamond, --text-xl, weight 300
   * Body paragraph   → Satoshi, --text-base, weight 400
   * Nav links        → Satoshi, --text-sm, weight 500, uppercase, tracking 0.12em
   * Buttons          → Satoshi, --text-sm, weight 500, uppercase, tracking 0.10em
   * Form labels      → Satoshi, --text-sm, weight 500, sentence case
   * Eyebrow text     → Satoshi, --text-xs, weight 500, uppercase, tracking 0.20em, accent color
   * Measurements     → Satoshi, --text-lg, weight 300, tabular-nums
   * Rates/prices     → Cormorant Garamond, --text-xl, weight 400, accent color
   * Captions         → Satoshi, --text-xs, weight 400, muted color
   */

  /* ── Glassmorphism (light theme) ───────────────────────────────────────── */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(201, 149, 106, 0.18);
  --glass-blur: blur(20px);

  /* ── Border Radius ─────────────────────────────────────────────────────── */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-2xl: 3rem;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(13, 8, 4, 0.06);
  --shadow-md: 0 4px 16px rgba(13, 8, 4, 0.08);
  --shadow-lg: 0 16px 48px rgba(13, 8, 4, 0.12);
  --shadow-glass: 0 8px 32px rgba(13, 8, 4, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --shadow-accent-glow: 0 0 0 3px rgba(201, 169, 138, 0.30);

  /* ── Animation Easings ─────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Duration ──────────────────────────────────────────────────────────── */
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
  --duration-cinematic: 1000ms;

  /* ── 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;
}

/* ── Glass Panel Classes (light theme) ─────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur) saturate(180%);
  -webkit-backdrop-filter: var(--glass-blur) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}

.glass-light {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-xl);
}

.glass-accent {
  background: rgba(201, 149, 106, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 149, 106, 0.18);
  border-radius: var(--radius-xl);
}

.glass-noir {
  background: rgba(26, 17, 24, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
}

/* ── Focus Visible ────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── Per-Page Accent + Section Color Overrides ─────────────────────────── */

/* Homepage — warm terracotta family */
.page-home {
  --color-accent: var(--color-accent-home);
  --color-section-dark: #2C2420;
  --color-section-dark-alt: #241E1A;
  --color-section-strip: #F0E6DA;
  --color-section-strip-text: #1A1118;
  --color-section-strip-muted: #7A6E6A;
  --color-card-placeholder: linear-gradient(160deg, #EDE4D8 0%, #E0D5C8 100%);
}

/* Modeling — warm gold family */
.page-model {
  --color-accent: var(--color-accent-model);
  --color-section-dark: #2A2510;
  --color-section-dark-alt: #221E0E;
  --color-section-strip: #F5EDDA;
  --color-section-strip-text: #2A2008;
  --color-section-strip-muted: #8A7A55;
  --color-card-placeholder: linear-gradient(160deg, #F0E8D0 0%, #E5DCC5 100%);
}

/* UGC — dusty rose family */
.page-ugc {
  --color-accent: var(--color-accent-ugc);
  --color-section-dark: #2C1E22;
  --color-section-dark-alt: #24181C;
  --color-section-strip: #F5E8EC;
  --color-section-strip-text: #2A1520;
  --color-section-strip-muted: #8A6A72;
  --color-card-placeholder: linear-gradient(160deg, #F2E0E5 0%, #E8D5DA 100%);
}

/* Entertainment — soft mauve family */
.page-ent {
  --color-accent: var(--color-accent-ent);
  --color-section-dark: #221828;
  --color-section-dark-alt: #1C1422;
  --color-section-strip: #EDE5F2;
  --color-section-strip-text: #201530;
  --color-section-strip-muted: #7A6A88;
  --color-card-placeholder: linear-gradient(160deg, #E8DDF0 0%, #DDD0E8 100%);
}

/* Links — dusty teal family */
.page-links {
  --color-accent: var(--color-accent-links);
}

/* ── Reduced Motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }
}