/* ==========================================================================
   Serenity — design tokens
   Light values are copied verbatim from Serenity-Design-System/tokens/*.css.
   The dark set is an addition: the design system ships light only, so the
   dark ramp below re-maps the same semantic names onto warm night values
   (lamp-lit plaster rather than neutral grey) and lifts the accents so they
   stay legible on a dark ground.
   ========================================================================== */

:root {
  /* Brand */
  --brand-gold: #C89042;
  --brand-gold-deep: #A9742C;
  --brand-charcoal: #4A4A48;

  /* Unit accents — palette source: real unit interiors */
  --unit-cobalt: #1B4FA8;
  --unit-cobalt-deep: #143C82;
  --unit-cobalt-tint: #E7EDF9;
  --unit-teal: #1F7A96;
  --unit-teal-deep: #175E74;
  --unit-teal-tint: #E5F1F5;
  --unit-terracotta: #D96F52;
  --unit-terracotta-deep: #B4543B;
  --unit-terracotta-tint: #FAEBE6;

  /* Warm sand neutrals — plaster walls, stone floors */
  --sand-0: #FDFBF7;
  --sand-1: #F7F1E8;
  --sand-2: #EFE6D8;
  --sand-3: #DFD2BF;
  --taupe: #A98F80;
  --wood: #B07C4F;
  --ink-1: #3B3834;
  --ink-2: #6B645C;
  --ink-3: #948C82;

  /* Semantic aliases */
  --surface-page: var(--sand-1);
  --surface-card: var(--sand-0);
  --surface-raised: #FFFFFF;
  --surface-band: var(--sand-2);
  --surface-deep: var(--ink-1);
  --text-heading: var(--ink-1);
  --text-body: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-on-accent: #FFFFFF;
  --text-on-deep: rgba(253, 251, 247, .78);
  --accent-primary: var(--brand-gold);
  --accent-primary-hover: var(--brand-gold-deep);
  --link: var(--unit-teal);
  --link-hover: var(--unit-teal-deep);
  --border-subtle: rgba(59, 56, 52, .12);
  --border-strong: rgba(59, 56, 52, .24);
  --success: #4E7C4A;
  --warning: #C4841D;
  --danger: #B4543B;
  --focus-ring: 0 0 0 3px rgba(31, 122, 150, .35);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --font-arabic: 'Cairo', system-ui, sans-serif;
  --font-arabic-display: 'Amiri', 'Cairo', Georgia, serif;
  --text-hero: clamp(40px, 6vw, 72px);
  --text-h1: clamp(32px, 4vw, 44px);
  --text-h2: clamp(26px, 3vw, 34px);
  --text-h3: 22px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-loose: 1.7;
  --tracking-caps: .18em;
  --weight-display: 500;

  /* Spacing & shape */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-arch: 999px 999px 0 0;
  --radius-pill: 999px;
  --container-max: 1200px;
  --tap-min: 44px;

  /* Effects */
  --shadow-card: 0 1px 2px rgba(59, 56, 52, .06), 0 6px 20px rgba(59, 56, 52, .08);
  --shadow-raised: 0 2px 6px rgba(59, 56, 52, .10), 0 16px 40px rgba(59, 56, 52, .14);
  --shadow-inset-line: inset 0 0 0 1px var(--border-subtle);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 150ms;
  --dur-med: 280ms;
  --protect-gradient: linear-gradient(to top, rgba(30, 28, 25, .72), rgba(30, 28, 25, 0) 55%);
  color-scheme: light;
}

/* --- Dark ------------------------------------------------------------- */
/* Defined once as a custom property block, applied both by explicit choice
   and by system preference when the visitor has not chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-gold: #DDA85E;
    --brand-gold-deep: #C89042;

    --unit-cobalt: #6E9AE0;
    --unit-cobalt-deep: #4C7ECB;
    --unit-cobalt-tint: rgba(110, 154, 224, .16);
    --unit-teal: #56AFC9;
    --unit-teal-deep: #3D93AC;
    --unit-teal-tint: rgba(86, 175, 201, .16);
    --unit-terracotta: #E68B6E;
    --unit-terracotta-deep: #CE6E51;
    --unit-terracotta-tint: rgba(230, 139, 110, .16);

    --sand-0: #1C1913;
    --sand-1: #14120E;
    --sand-2: #232019;
    --sand-3: #322D24;
    --ink-1: #F4EEE3;
    --ink-2: #C6BCAC;
    --ink-3: #948C82;

    --surface-page: #14120E;
    --surface-card: #1C1913;
    --surface-raised: #232019;
    --surface-band: #191610;
    --surface-deep: #0F0D0A;
    --text-heading: #F4EEE3;
    --text-body: #C6BCAC;
    --text-muted: #948C82;
    --text-on-accent: #14120E;
    --text-on-deep: rgba(244, 238, 227, .72);
    --border-subtle: rgba(244, 238, 227, .12);
    --border-strong: rgba(244, 238, 227, .24);
    --focus-ring: 0 0 0 3px rgba(86, 175, 201, .45);

    --shadow-card: 0 1px 2px rgba(0, 0, 0, .40), 0 6px 20px rgba(0, 0, 0, .38);
    --shadow-raised: 0 2px 6px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .50);
    --protect-gradient: linear-gradient(to top, rgba(12, 10, 8, .86), rgba(12, 10, 8, 0) 60%);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --brand-gold: #DDA85E;
  --brand-gold-deep: #C89042;

  --unit-cobalt: #6E9AE0;
  --unit-cobalt-deep: #4C7ECB;
  --unit-cobalt-tint: rgba(110, 154, 224, .16);
  --unit-teal: #56AFC9;
  --unit-teal-deep: #3D93AC;
  --unit-teal-tint: rgba(86, 175, 201, .16);
  --unit-terracotta: #E68B6E;
  --unit-terracotta-deep: #CE6E51;
  --unit-terracotta-tint: rgba(230, 139, 110, .16);

  --sand-0: #1C1913;
  --sand-1: #14120E;
  --sand-2: #232019;
  --sand-3: #322D24;
  --ink-1: #F4EEE3;
  --ink-2: #C6BCAC;
  --ink-3: #948C82;

  --surface-page: #14120E;
  --surface-card: #1C1913;
  --surface-raised: #232019;
  --surface-band: #191610;
  --surface-deep: #0F0D0A;
  --text-heading: #F4EEE3;
  --text-body: #C6BCAC;
  --text-muted: #948C82;
  --text-on-accent: #14120E;
  --text-on-deep: rgba(244, 238, 227, .72);
  --border-subtle: rgba(244, 238, 227, .12);
  --border-strong: rgba(244, 238, 227, .24);
  --focus-ring: 0 0 0 3px rgba(86, 175, 201, .45);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .40), 0 6px 20px rgba(0, 0, 0, .38);
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .50);
  --protect-gradient: linear-gradient(to top, rgba(12, 10, 8, .86), rgba(12, 10, 8, 0) 60%);
  color-scheme: dark;
}

/* Per-unit accent scope — set once on a section or page, never mixed. */
[data-accent="cobalt"] {
  --accent: var(--unit-cobalt);
  --accent-deep: var(--unit-cobalt-deep);
  --accent-tint: var(--unit-cobalt-tint);
}
[data-accent="teal"] {
  --accent: var(--unit-teal);
  --accent-deep: var(--unit-teal-deep);
  --accent-tint: var(--unit-teal-tint);
}
[data-accent="terracotta"] {
  --accent: var(--unit-terracotta);
  --accent-deep: var(--unit-terracotta-deep);
  --accent-tint: var(--unit-terracotta-tint);
}