/* ==========================================================================
   Rupa's design tokens - "Ivory Atelier / Espresso Salon"

   Light : warm ivory, burgundy, olive and antique gold.
   Dark  : espresso, muted rose, olive and champagne.

   Warm neutrals connect the entire interface. Burgundy identifies editorial
   links and brand details; olive adds a quieter supporting note. Colour is
   concentrated in small details and gently shaded surfaces, while gold
   continues to identify primary actions.

   Every colour a component needs has a semantic token here. Components must
   not reach for a raw palette value or an inline rgba() - if they do, a theme
   swap leaves stale colour behind, which is exactly the bug the --on-dark-*
   group below exists to prevent.
   ========================================================================== */

:root {
  color-scheme: light;

  /* -- Palette primitives -----------------------------------------------
     Named for what they are, not for the mood of one theme: a token called
     "ivory" pointing at #0B0B0A in dark mode is worse than no name at all. */
  --paper: #f8f3e9;
  --paper-deep: #eee8de;
  --ink: #29231f;
  --onyx: #171413;
  --graphite: #211d1a;
  --stone: #68604f;

  --gold: #ae823c;
  --gold-dark: #805d2a;
  --gold-light: #d9b36a;
  --wine: #743d49;
  --wine-soft: #f0e9e3;
  --olive: #59604b;
  --olive-soft: #eeece2;
  --brand-deep: #40252d;

  /* -- Surfaces ---------------------------------------------------------- */
  --bg: #f8f5ef;
  --bg-alt: #fffdf8;
  --bg-sunken: #eee8de;
  --bg-inverse: var(--onyx);
  --surface: #fffdf8;
  --surface-raised: #fffdf8;
  --surface-muted: #f2ede5;

  /* -- Text -------------------------------------------------------------- */
  --text: var(--ink);
  --text-muted: #665e55;
  --text-subtle: #82786e;
  --text-inverse: var(--paper);
  /* Dark labels keep filled gold actions readable in both themes. */
  --text-on-gold: #16120a;

  /* -- Ink on an always-dark ground --------------------------------------
     The footer, the admin sidebar, a hero over a scrimmed photograph and an
     inverse feature band are dark in *both* themes - a photograph does not
     get lighter because the reader picked light mode. So this group is
     defined once and never re-pointed below; the contexts that genuinely do
     flip use --text-inverse / --bg-inverse instead.

     These replace inline rgba(247, 242, 232, x) literals that were scattered
     across three stylesheets, where they silently kept the old ivory. */
  --on-dark: #f8f3e9;
  --on-dark-muted: rgba(247, 246, 243, 0.72);
  --on-dark-subtle: rgba(247, 246, 243, 0.52);
  --on-dark-faint: rgba(247, 246, 243, 0.34);
  --on-dark-line: rgba(247, 246, 243, 0.16);
  --on-dark-wash: rgba(247, 246, 243, 0.06);

  /* -- Lines ------------------------------------------------------------- */
  --line: #e0d7ca;
  --line-strong: #c8bcac;
  --line-gold: rgba(180, 136, 63, 0.4);
  --line-inverse: rgba(13, 13, 12, 0.16);

  /* -- Accents ----------------------------------------------------------- */
  --accent: var(--gold);
  /* Text links darken on hover; filled gold buttons brighten to preserve
     contrast with their dark label. These roles must stay separate. */
  --accent-hover: var(--gold-dark);
  --accent-bright: #c39a55;
  --accent-soft: rgba(180, 136, 63, 0.1);
  --accent-secondary: var(--stone);

  /* -- Status ------------------------------------------------------------ */
  --success: #2f6b46;
  --success-soft: rgba(47, 107, 70, 0.1);
  --warning: #906019;
  --warning-soft: rgba(154, 106, 28, 0.12);
  --danger: #a32d1e;
  --danger-soft: rgba(163, 45, 30, 0.1);
  --info: #2b5163;
  --info-soft: rgba(43, 81, 99, 0.1);

  /* -- Scrims ------------------------------------------------------------ */
  /* Dialog and drawer backdrop. */
  --scrim: rgba(11, 11, 10, 0.58);
  /* The wash over hero and card photography, flat rather than graded.
     0.62 is not a taste value: over a pure-white photograph - the worst case -
     it is what keeps --on-dark at 5.16:1, past the 4.5:1 minimum. Below about
     0.60 the headline itself starts to fail. Defined once and never
     re-pointed, because the photograph underneath is the same in both
     themes. */
  --overlay-scrim: rgba(11, 11, 10, 0.62);

  /* -- Focus ------------------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* -- Type -------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
    "Book Antiqua", Georgia, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* A wider top end than before: the display sizes are where a serif earns
     its keep, and a 4rem hero on a 1440px screen reads timid. */
  --step--2: clamp(0.69rem, 0.68rem + 0.05vw, 0.72rem);
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1rem);
  --step-1: clamp(1.1rem, 1.05rem + 0.28vw, 1.25rem);
  --step-2: clamp(1.35rem, 1.24rem + 0.55vw, 1.7rem);
  --step-3: clamp(1.7rem, 1.44rem + 1.3vw, 2.5rem);
  --step-4: clamp(2.1rem, 1.64rem + 2.3vw, 3.5rem);
  --step-5: clamp(2.6rem, 1.85rem + 3.75vw, 5rem);

  /* Display type is set tight; only the small uppercase labels are tracked
     out. The old sheet tracked *everything* out, which is the single biggest
     reason it read as heritage rather than contemporary. */
  --tracking-tight: -0.024em;
  --tracking-snug: -0.012em;
  --tracking-wide: 0.1em;
  --tracking-wider: 0.18em;
  --leading-tight: 1.06;
  --leading-snug: 1.3;
  --leading-normal: 1.62;

  /* -- Space (a 4px base, named by intent) ------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;
  --space-4xl: 8rem;

  /* -- Shape ------------------------------------------------------------- */
  /* Still restrained - a jewellery house is not a rounded pill - but the old
     1-3px radii read as a 2012 admin panel rather than as precision. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* -- Shadow ------------------------------------------------------------
     Two layers each: a tight contact shadow plus a wide soft one. A single
     large blur reads as a grey smudge; the pair reads as a lifted surface.
     Neutral rather than warm-brown, so cards do not tint the page. */
  --shadow-xs: 0 1px 2px rgba(13, 13, 12, 0.05);
  --shadow-sm: 0 1px 3px rgba(13, 13, 12, 0.06), 0 1px 2px rgba(13, 13, 12, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 13, 12, 0.06), 0 12px 28px rgba(13, 13, 12, 0.06);
  --shadow-lg: 0 8px 24px rgba(13, 13, 12, 0.08), 0 32px 64px rgba(13, 13, 12, 0.1);

  /* -- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 240ms;
  --dur-slow: 350ms;

  /* -- Layout ------------------------------------------------------------ */
  --container: 78rem;
  --container-narrow: 46rem;
  --container-wide: 90rem;
  --header-bar-height: 4.75rem;
  /* Everything that sticks below the header offsets by this. It grows by one
     row where the menu moves under the logo (see components.css). */
  --header-height: var(--header-bar-height);
  --z-header: 60;
  --z-drawer: 80;
  --z-modal: 90;
  --z-toast: 100;

  /* -- Photography treatment -------------------------------------------- */
  --image-bg: #eae3d8;
}

/* ==========================================================================
   Dark: the same roles, re-pointed.

   Light text and softened accents sit on warm espresso surfaces.
   Both dark declarations below must stay in sync.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--onyx);
  --bg-alt: #1c1816;
  --bg-sunken: #131110;
  --bg-inverse: var(--paper);
  --surface: var(--graphite);
  --surface-raised: #2b2420;
  --surface-muted: #1b1715;

  --text: #f4ecdf;
  --text-muted: #bcb0a1;
  --text-subtle: #988b7d;
  --text-inverse: var(--ink);
  --text-on-gold: #16120a;

  --line: rgba(246, 245, 242, 0.12);
  --line-strong: rgba(246, 245, 242, 0.24);
  --line-gold: rgba(217, 179, 106, 0.44);
  --line-inverse: rgba(13, 13, 12, 0.16);

  --gold: #d9b36a;
  --gold-dark: #b4883f;
  --gold-light: #e5c489;
  --accent: #d9b36a;
  --accent-hover: #e5c489;
  --accent-bright: #e5c489;
  --accent-soft: rgba(217, 179, 106, 0.14);
  --accent-secondary: #9a958b;
  --wine: #d9a5b0;
  --wine-soft: #281e21;
  --olive: #b9c29f;
  --olive-soft: #23251e;

  --success: #6fbf90;
  --success-soft: rgba(111, 191, 144, 0.14);
  --warning: #d8ab5e;
  --warning-soft: rgba(216, 171, 94, 0.16);
  --danger: #e58a7b;
  --danger-soft: rgba(229, 138, 123, 0.14);
  --info: #8fb6cc;
  --info-soft: rgba(143, 182, 204, 0.14);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);


  /* Depth on a dark ground comes from a lighter surface, not a darker
     shadow, so these stay tight and are carried mostly by --surface-raised. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55), 0 32px 64px rgba(0, 0, 0, 0.55);

  --image-bg: #28221e;
}

/* ==========================================================================
   Respect the system preference on a first visit, before any explicit choice
   has been stamped on <html>. Values are duplicated rather than shared: a
   media query cannot be re-scoped to a selector, and the alternative -
   defining dark values on :root and overriding for light - leaves a page
   with no theme attribute rendering dark on a light system.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #171413;
    --bg-alt: #1c1816;
    --bg-sunken: #131110;
    --bg-inverse: #f8f3e9;
    --surface: #211d1a;
    --surface-raised: #2b2420;
    --surface-muted: #1b1715;

    --text: #f4ecdf;
    --text-muted: #bcb0a1;
    --text-subtle: #988b7d;
    --text-inverse: #29231f;
    --text-on-gold: #16120a;

    --line: rgba(246, 245, 242, 0.12);
    --line-strong: rgba(246, 245, 242, 0.24);
    --line-gold: rgba(217, 179, 106, 0.44);
    --line-inverse: rgba(13, 13, 12, 0.16);

    --gold: #d9b36a;
    --gold-dark: #b4883f;
    --gold-light: #e5c489;
    --accent: #d9b36a;
    --accent-hover: #e5c489;
    --accent-bright: #e5c489;
    --accent-soft: rgba(217, 179, 106, 0.14);
    --accent-secondary: #9a958b;
    --wine: #d9a5b0;
    --wine-soft: #281e21;
    --olive: #b9c29f;
    --olive-soft: #23251e;

    --success: #6fbf90;
    --success-soft: rgba(111, 191, 144, 0.14);
    --warning: #d8ab5e;
    --warning-soft: rgba(216, 171, 94, 0.16);
    --danger: #e58a7b;
    --danger-soft: rgba(229, 138, 123, 0.14);
    --info: #8fb6cc;
    --info-soft: rgba(143, 182, 204, 0.14);

    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);


    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55), 0 32px 64px rgba(0, 0, 0, 0.55);

    --image-bg: #28221e;
  }
}