/* ============================================================
   LCS — Mediterranean Light Design Tokens
   Source of truth: docs/03_DESIGN_DNA.json (locked, do not drift)
   ============================================================ */

:root {
  /* Backgrounds — bone canvas default, sand surfaces, onyx for hero/always-on only */
  --bg-canvas: #F5F0E6;
  --bg-surface-1: #E8DDC9;
  --bg-surface-2: #DCCFB6;
  --bg-inverse-dark: #0A0A0A;
  --bg-inverse-dark-2: #141414;

  /* Text — v9: all blue/navy removed in favour of neutral charcoal */
  --text-primary-on-light: #1A1A1A;
  --text-secondary-on-light: #4A4A4A;
  --text-tertiary-on-light: #8A8B8E;
  --text-primary-on-dark: #F5F0E6;
  --text-secondary-on-dark: #C8B59A;
  --text-tertiary-on-dark: #6B6058;

  /* Accents */
  --gold: #C8A357;
  --gold-hover: #D4B570;
  --gold-bright: #E0C283;
  --gold-deep: #8B7340;
  --gold-deeper: #6B5A30;
  --gold-glow: rgba(200, 163, 87, 0.18);
  /* Gold-leaf gradient stack — top-lit gilt for puffy CTAs / engraved type */
  --gold-leaf-top:    #DCB668;
  --gold-leaf-mid:    #C8A357;
  --gold-leaf-bottom: #B5903F;
  --gold-leaf-rim:    #8B7340;

  /* Charcoal — neutral dark anchor. --navy alias kept for backward-compat. */
  --charcoal: #1A1A1A;
  --charcoal-hover: #2A2A2A;
  --navy: #1A1A1A;
  --navy-hover: #2A2A2A;

  /* Puffy-button shadow stack — Wispr Flow-inspired tactile depth. */
  --shadow-puffy-gold-rim:   inset 0 1px 0 rgba(255, 220, 130, 0.55), inset 0 -1px 0 rgba(107, 90, 48, 0.35);
  --shadow-puffy-gold-rest:  0 1px 0 rgba(107, 90, 48, 0.55), 0 4px 0 -1px rgba(139, 115, 64, 0.6), 0 10px 24px -6px rgba(200, 163, 87, 0.45), 0 18px 38px -10px rgba(139, 115, 64, 0.28);
  --shadow-puffy-gold-hover: 0 2px 0 rgba(107, 90, 48, 0.6),  0 6px 0 -1px rgba(139, 115, 64, 0.55), 0 14px 32px -6px rgba(200, 163, 87, 0.55), 0 24px 48px -12px rgba(139, 115, 64, 0.32);
  --shadow-puffy-gold-press: 0 0 0 rgba(107, 90, 48, 0.4), 0 2px 0 -1px rgba(139, 115, 64, 0.5), 0 6px 14px -4px rgba(200, 163, 87, 0.35);

  --shadow-puffy-dark-rim:   inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.55);
  --shadow-puffy-dark-rest:  0 1px 0 rgba(0, 0, 0, 0.6), 0 4px 0 -1px rgba(0, 0, 0, 0.5), 0 10px 24px -6px rgba(0, 0, 0, 0.45), 0 18px 38px -10px rgba(0, 0, 0, 0.28);
  --shadow-puffy-dark-hover: 0 2px 0 rgba(0, 0, 0, 0.65), 0 6px 0 -1px rgba(0, 0, 0, 0.55), 0 14px 32px -6px rgba(0, 0, 0, 0.55), 0 24px 48px -12px rgba(0, 0, 0, 0.32);
  --shadow-puffy-dark-press: 0 0 0 rgba(0, 0, 0, 0.4), 0 2px 0 -1px rgba(0, 0, 0, 0.5), 0 6px 14px -4px rgba(0, 0, 0, 0.35);

  --shadow-puffy-bone-rim:   inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(138, 139, 142, 0.30);
  --shadow-puffy-bone-rest:  0 1px 0 rgba(138, 139, 142, 0.4), 0 4px 0 -1px rgba(138, 139, 142, 0.35), 0 10px 24px -6px rgba(26, 26, 26, 0.18), 0 18px 38px -10px rgba(26, 26, 26, 0.12);
  --shadow-puffy-bone-hover: 0 2px 0 rgba(138, 139, 142, 0.45), 0 6px 0 -1px rgba(138, 139, 142, 0.4), 0 14px 32px -6px rgba(26, 26, 26, 0.22), 0 24px 48px -12px rgba(26, 26, 26, 0.14);
  --shadow-puffy-bone-press: 0 0 0 rgba(138, 139, 142, 0.3), 0 2px 0 -1px rgba(138, 139, 142, 0.35), 0 6px 14px -4px rgba(26, 26, 26, 0.12);

  /* Borders */
  --border-subtle-light: rgba(26, 26, 26, 0.08);
  --border-default-light: rgba(26, 26, 26, 0.15);
  --border-emphasized-light: rgba(200, 163, 87, 0.5);
  --border-subtle-dark: rgba(245, 240, 230, 0.08);
  --border-default-dark: rgba(245, 240, 230, 0.15);

  /* Overlays */
  --scrim-light-60: rgba(245, 240, 230, 0.60);
  --scrim-light-65: rgba(245, 240, 230, 0.65);
  --scrim-dark-25: rgba(10, 10, 10, 0.25);
  --scrim-dark-35: rgba(10, 10, 10, 0.35);
  --scrim-dark-45: rgba(10, 10, 10, 0.45);
  --scrim-dark-85: rgba(10, 10, 10, 0.85);

  /* Semantic */
  --success: #5C8B6E;
  --danger: #A04848;
  --warning: #C19440;

  /* Type families */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-display-editorial: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-arabic-body: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  --font-arabic-display: 'Noto Naskh Arabic', 'Cormorant Garamond', serif;

  /* Type scale */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-48: 48px;
  --fs-72: 72px;
  --fs-96: 96px;
  --fs-128: 128px;

  /* Spacing scale (8pt) */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;
  --s-128: 128px;
  --s-192: 192px;
  --s-256: 256px;

  /* Section padding (vertical) */
  --section-py-desktop: 128px;
  --section-py-tablet: 96px;
  --section-py-mobile: 64px;

  /* Container */
  --container-max: 1440px;
  --container-px-desktop: 64px;
  --container-px-tablet: 32px;
  --container-px-mobile: 20px;

  /* Easing */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cinematic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-micro: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Durations */
  --d-micro: 200ms;
  --d-quick: 400ms;
  --d-standard: 700ms;
  --d-slow: 1200ms;
  --d-cinematic: 1800ms;

  /* Shadows (rare — editorial uses hairlines) */
  --shadow-hairline-light: 0 1px 0 rgba(26, 26, 26, 0.06);
  --shadow-hairline-dark: 0 1px 0 rgba(245, 240, 230, 0.06);
  --shadow-modal: 0 24px 64px rgba(26, 26, 26, 0.18);

  /* v4 Royal frame system (additive on top of locked tokens) */
  --frame-stroke: 1px;
  --frame-gold: var(--gold);
  --frame-glow: var(--gold-glow);
  --frame-corner-size: 24px;
  --frame-corner-size-lg: 36px;
  --frame-inset: 16px;
  --bg-canvas-deep: linear-gradient(180deg, #F5F0E6 0%, #F0E9DB 65%, #ECE3D0 100%);
  --bg-canvas-deep-radial: radial-gradient(ellipse at 50% 0%, rgba(200, 163, 87, 0.04) 0%, transparent 60%), linear-gradient(180deg, #F5F0E6 0%, #F0E9DB 100%);

  /* ----------------------------------------------------------
     Direction-aware tokens (RTL-flippable)
     LTR default. :dir(rtl) overrides flip them.
     Used by transform-origin and translateX physical values.
     ---------------------------------------------------------- */
  --origin-start: left;
  --origin-end: right;
  --ltr-flip: 1;          /* multiplier for physical X transforms */
  --menu-slide-from: -1;  /* mobile menu enters from LEFT in LTR */
}

/* RTL document overrides */
:root:dir(rtl),
[dir="rtl"] {
  --origin-start: right;
  --origin-end: left;
  --ltr-flip: -1;
  --menu-slide-from: 1;   /* RTL: menu enters from right (mirror) */
}

/* Arabic typography — kill letter-spacing (cuneiform feel ruins it),
   swap families, slightly looser line-height */
:lang(ar),
[lang="ar"] {
  font-family: var(--font-arabic-body);
  letter-spacing: 0 !important;
  line-height: 1.85;
}
:lang(ar) .type-hero,
:lang(ar) .type-h1,
:lang(ar) .type-h2,
:lang(ar) .type-h3,
[lang="ar"] .type-hero,
[lang="ar"] .type-h1,
[lang="ar"] .type-h2,
[lang="ar"] .type-h3 {
  font-family: var(--font-arabic-display);
  letter-spacing: 0 !important;
}
:lang(ar) .type-mono,
:lang(ar) .type-caption,
[lang="ar"] .type-mono,
[lang="ar"] .type-caption {
  font-family: var(--font-arabic-body);
  text-transform: none; /* Arabic has no case */
  letter-spacing: 0 !important;
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-micro: 0ms;
    --d-quick: 0ms;
    --d-standard: 0ms;
    --d-slow: 0ms;
    --d-cinematic: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}