/* ============================================================================
   SARART · DESIGN TOKENS
   Extracted from the approved mockup (sarart-web: tailwind.config.ts, content,
   and the inline styles across components/globals.css). One place to change any
   brand value. Do not hardcode these literals in component CSS — use the vars.
   ============================================================================ */

:root {
  /* ---- Core darks (backgrounds, layered from base to deepest) ---- */
  --ink: #1a1a20;          /* app background + "ink" on gold */
  --bg: #1a1a20;
  --surface: #202028;      /* cards */
  --surface-2: #23232c;    /* raised / striped placeholder */
  --surface-3: #1e1e26;
  --dark-2: #13131a;       /* section base A */
  --dark-3: #0f0f14;       /* footer / deepest */
  --dark-4: #16161f;       /* cool "stage" base */
  --dark-5: #16161d;       /* newsletter panel top */
  --dark-6: #121218;       /* newsletter panel bottom */
  --panel: #18181e;        /* dropdown panels (rgba in use) */

  /* ---- Brand gold + ink pairing ---- */
  --gold: #D39407;
  --gold-ink: #1a1a20;     /* dark text on gold (marquee, pills, buttons) */
  --gold-soft: rgba(211, 148, 7, 0.12);
  --gold-line: rgba(211, 148, 7, 0.34);   /* ghost frame hairline (rest) */
  --gold-line-hover: rgba(211, 148, 7, 0.5);

  /* ---- Art-history accent palette (gradients / placeholders) ---- */
  --art-blue: #073D94;
  --art-green: #058C60;
  --art-red: #e63946;

  /* ---- Text scale ---- */
  --text: #ffffff;
  --text-1: #e9e9ee;       /* card foreground */
  --text-2: #c1c1cb;       /* body copy on dark */
  --text-3: #cfcfd8;       /* filter option */
  --text-muted: #8f93a5;   /* secondary / captions */
  --text-dim: #6c6c7a;     /* tertiary / disclaimers */
  --text-placeholder: #b7b4ac; /* "// JACKET PHOTO" watermark */

  /* ---- Hairlines / borders ---- */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-nav: rgba(255, 255, 255, 0.9);

  /* ---- Typography ---- */
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Open Sans", system-ui, -apple-system, sans-serif;

  /* fluid type steps used across the mockup */
  --fs-eyebrow: 11px;
  --fs-body: clamp(1rem, 1.9vw, 1.1rem);
  --fs-h2: clamp(2rem, 8vw, 3.4rem);
  --fs-h1: clamp(2.3rem, 7vw, 3.8rem);
  --fs-display: clamp(2.6rem, 7vw, 4.2rem);

  --tracking-eyebrow: 0.28em;
  --tracking-wide: 0.14em;

  /* ---- Radii ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-tile: 7px;
  --r-md: 9px;
  --r-lg: 14px;   /* cards */
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-pill: 40px; /* buttons / nav pills / chips */

  /* ---- Shadows ---- */
  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.42);
  --shadow-card-hover: 0 22px 48px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-deep: 0 34px 80px rgba(0, 0, 0, 0.55), 0 12px 30px rgba(0, 0, 0, 0.42);
  --shadow-dropdown: 0 24px 50px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 12px 30px rgba(211, 148, 7, 0.3);
  --shadow-fab: 0 8px 24px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(52, 199, 89, 0.35);

  /* ---- Motion (canonical easings from the mockup) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* primary reveal/hover */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.4, 1);/* nav pill / FAB pop */
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);    /* deck / sweeps */
  --dur-fast: 0.25s;
  --dur: 0.4s;
  --dur-slow: 0.7s;

  /* ---- Layout ---- */
  --nav-h: 106px;          /* marquee + header clearance used by inner pages */
  --wrap: 1200px;
  --wrap-narrow: 1100px;
  --pad-x: clamp(20px, 6vw, 72px);
  --z-nav: 80;
  --z-menu: 95;
  --z-drawer: 96;
  --z-toast: 120;
  --z-fab: 1000;
  --z-preloader: 9999;

  /* Messaging channel (the floating SMS button) */
  --sms: #34C759;   /* iOS Messages green — the FAB reads as a messaging channel */

  /* ---- shadcn-style HSL aliases (kept for parity with mockup vars) ---- */
  --background: 240 10% 11%;
  --foreground: 0 0% 100%;
  --card: 240 11% 14%;
  --card-foreground: 240 14% 92%;
  --muted: 240 11% 14%;
  --muted-foreground: 229 11% 60%;
  --border: 240 8% 22%;
  --primary: 41 94% 43%;
  --primary-foreground: 240 10% 11%;
  --ring: 41 94% 43%;
}