/* =========================================================================
   Design tokens (Phase 5). Loaded after site.css on every public page and desk, and after the portal bundle's
   stylesheet in the Sangat portal, so both sides read one set of values.
     Divine Dark Temple   the dark theme everywhere: night at the ashram (deep indigo-black, lamp-glow amber,
                          vermilion and gold panels).
     Temple Dawn          the light theme of the us palette: Sandalwood Parchment (unchanged).
     UK Temple            the light theme of the uk palette (a uk member's on every domain): dawn at the Sarovar,
                          soft ivory and pale marble, marigold gold, deep rose-vermilion, morning blue, garden green.
   Colours are OKLCH (with the hex the first paint uses beside each); every text pairing is WCAG 2.2 AA (ink 15.8–18.8:1,
   muted 6.3–9.8:1, accents 5.4:1 or more). Type, spacing, radii and motion scales are shared by every theme.
   ========================================================================= */

:root {
  /* type scale: Cormorant Garamond for headings (--display / --serif), the sans for reading; fluid, ratio ≈ 1.2 */
  --ds-step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --ds-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --ds-step-1: clamp(1.2rem, 1.12rem + 0.38vw, 1.4rem);
  --ds-step-2: clamp(1.44rem, 1.3rem + 0.68vw, 1.85rem);
  --ds-step-3: clamp(1.73rem, 1.5rem + 1.1vw, 2.45rem);
  --ds-step-4: clamp(2.07rem, 1.7rem + 1.8vw, 3.2rem);
  --ds-step-5: clamp(2.49rem, 1.9rem + 2.9vw, 4.2rem);
  /* spacing scale (4 px base) */
  --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px;
  --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 64px; --ds-space-9: 96px;
  --ds-radius-s: 10px; --ds-radius-m: 16px; --ds-radius-l: 24px; --ds-radius-pill: 999px;
  --ds-measure: 68ch;
  /* motion: calm, short, always off for reduced motion (below) */
  --ds-dur-1: 140ms; --ds-dur-2: 220ms; --ds-dur-3: 420ms; --ds-dur-glow: 520ms;
  --ds-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* the ornament gold and the lamp glow, constant across themes */
  --ds-gold-leaf: oklch(0.8 0.13 78);            /* #EEB35A: lines and ornaments, never body text on parchment */
  --ds-lamp: oklch(0.78 0.16 70);                /* #F5A21F */
  --ds-lamp-glow: oklch(0.78 0.16 70 / 0.38);
  --ds-vermilion: oklch(0.36 0.12 10);           /* #78122B: the primary action fill */
}

/* ------------------------------------------------------------------------------------- Divine Dark Temple -- */
:root[data-theme="dark"], :root.dark {
  --ds-canvas: oklch(0.155 0.022 285);           /* #0B0B15 */
  --ds-surface: oklch(0.195 0.024 285);          /* #14131F */
  --ds-sunken: oklch(0.135 0.02 285);            /* #070710 */
  --ds-raised: oklch(0.235 0.026 285);           /* #1D1C2A */
  --ds-ink: oklch(0.985 0.006 85);               /* #FCFAF6 */
  --ds-muted: oklch(0.78 0.03 75);               /* #C3B5A3: 9.8:1 */
  --ds-gold-ink: oklch(0.82 0.13 75);            /* #F5B75B: 11:1 */
  --ds-line: oklch(0.78 0.16 70 / 0.22);
  --ds-panel: linear-gradient(160deg, oklch(0.3 0.11 12 / 0.55), oklch(0.2 0.05 300 / 0.4));   /* vermilion-and-gold panel wash */
  --ds-texture: radial-gradient(1200px 760px at 86% -10%, oklch(0.78 0.16 70 / 0.1), transparent 60%),
    radial-gradient(1000px 760px at -10% 20%, oklch(0.36 0.12 10 / 0.16), transparent 62%),
    radial-gradient(900px 600px at 50% 110%, oklch(0.35 0.08 285 / 0.35), transparent 70%);
  /* the site's own names for the same values (site.css) */
  --onyx: #0B0B15;
  --parchment: #0B0B15;
  --surface: #14131F;
  --sunken: #070710;
  --ink: #FCFAF6;
  --muted: #C3B5A3;
  --gold-text: #F5B75B;
  --accent: #F5B75B;
  --header-bg: rgba(11, 11, 21, 0.74);
  --header-bg-solid: rgba(11, 11, 21, 0.92);
  --header-bg-opaque: #0B0B15;
  --glass: rgba(20, 19, 31, 0.86);
  --glass-panel: rgba(20, 19, 31, 0.62);
  --canvas-underlay: var(--ds-texture);
}
/* the portal reads --c-*; the bundle writes them inline per festival, so the neutrals are held here (accents stay festive) */
:root.dark {
  --c-canvas: #0B0B15 !important; --c-surface: #14131F !important; --c-sunken: #070710 !important;
  --c-ink: #FCFAF6 !important; --c-muted: #C3B5A3 !important;
}
:root[data-theme="dark"] body, :root.dark body { background-color: #0B0B15; }

/* ----------------------------------------------------------------------------------------------- UK Temple -- */
/* public pages and desks: the uk palette's body class with the light theme; the portal: <html data-djjs-branch="uk"> */
:root[data-theme="light"] body.theme-tenant-uk, :root[data-djjs-branch="uk"]:not(.dark) {
  --ds-canvas: oklch(0.982 0.008 90);            /* #FBF9F3 soft ivory */
  --ds-surface: oklch(0.995 0.004 95);           /* #FEFDFA */
  --ds-sunken: oklch(0.955 0.014 88);            /* #F4F0E6 parchment */
  --ds-marble: oklch(0.968 0.006 250);           /* #F1F5F8 pale marble */
  --ds-ink: oklch(0.24 0.03 20);                 /* #2C1919: 15.8:1 */
  --ds-muted: oklch(0.46 0.03 40);               /* #67534C: 6.8:1 */
  --ds-rose: oklch(0.42 0.15 15);                /* #8C1832 deep rose-vermilion: 8.7:1, ivory on it 8.9:1 */
  --ds-gold-ink: oklch(0.52 0.12 65);            /* #975800 saffron gold text: 5.4:1 */
  --ds-marigold: oklch(0.78 0.16 72);            /* #F5A420 ornaments and flowers only */
  --ds-sky: oklch(0.93 0.03 240);                /* #D7EBFA morning sky wash */
  --ds-sky-ink: oklch(0.42 0.09 245);            /* #19517B: 8:1 */
  --ds-garden: oklch(0.5 0.1 150);               /* #337344 garden green: 5.4:1 */
  --ds-line: oklch(0.78 0.16 72 / 0.32);
  --ds-texture: radial-gradient(1100px 700px at 84% -12%, oklch(0.93 0.03 240 / 0.7), transparent 62%),
    radial-gradient(900px 640px at -8% 18%, oklch(0.9 0.07 85 / 0.45), transparent 64%),
    linear-gradient(180deg, oklch(0.97 0.012 240 / 0.6), transparent 380px);
  --parchment: #FBF9F3;
  --surface: #FEFDFA;
  --sunken: #F4F0E6;
  --line: #EADFC9;
  --ink: #2C1919;
  --muted: #67534C;
  --accent: #8C1832;
  --vermilion: #8C1832;
  --deep-vermilion: #8C1832;
  --imperial-crimson: #8C1832;
  --gold-text: #975800;
  --amber-ink: #975800;
  --success: #337344;
  --card-border: oklch(0.78 0.16 72 / 0.38);
  --header-bg: rgba(251, 249, 243, 0.8);
  --header-bg-solid: rgba(251, 249, 243, 0.95);
  --header-bg-opaque: #FBF9F3;
  --glass: rgba(254, 253, 250, 0.88);
  --glass-panel: rgba(254, 253, 250, 0.82);
  --canvas-underlay: var(--ds-texture);
  --tenant-gold: #975800;
}
:root[data-djjs-branch="uk"]:not(.dark) {
  --c-canvas: #FBF9F3 !important; --c-surface: #FEFDFA !important; --c-sunken: #F4F0E6 !important;
  --c-ink: #2C1919 !important; --c-muted: #67534C !important; --c-line: #EADFC9 !important;
}
:root[data-theme="light"] body.theme-tenant-uk { background-color: #FBF9F3; }

/* ------------------------------------------------------------------------------------------- ornaments -- */
/* A fine golden arch with a lamp-dot border (assets/img/ornament-arch.svg), crowning a section: the footer, a hero, a frame */
.ds-arch-crown { position: relative; }
.ds-arch-crown::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(600px, 86%); aspect-ratio: 600 / 64; transform: translate(-50%, -62%);
  background: url("../img/ornament-arch.svg") center / contain no-repeat; pointer-events: none;
}
:root[data-theme="dark"] .ds-arch-crown::before { filter: drop-shadow(0 0 6px var(--ds-lamp-glow)); }
/* lamp-dot border: a row of small glowing dots */
.ds-lampdots { background-image: radial-gradient(circle, var(--ds-lamp) 0 1.6px, transparent 2.2px); background-size: 14px 6px; background-repeat: repeat-x; background-position: center; height: 6px; }
:root[data-theme="dark"] .ds-lampdots { filter: drop-shadow(0 0 3px var(--ds-lamp-glow)); }
/* a medallion: a gold ring with an inner hairline */
.ds-medallion { border-radius: 50%; box-shadow: 0 0 0 1px var(--ds-gold-leaf), 0 0 0 5px color-mix(in oklch, var(--ds-gold-leaf) 18%, transparent), 0 10px 30px -14px var(--ds-lamp-glow); }
/* a mandala ring behind content (decoration only) */
.ds-mandala { background: repeating-conic-gradient(from 0deg, color-mix(in oklch, var(--ds-gold-leaf) 26%, transparent) 0 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%, #000 62%, transparent 63%); mask: radial-gradient(circle, transparent 54%, #000 55%, #000 62%, transparent 63%); }

/* -------------------------------------------------------------------------------------------- photo frames -- */
/* still photographs only; an arched or medallion crop is never used for a photograph showing Maharaj Ji (those keep
   the plain frame) and the gallery uses the plain frame for photographs with recognisable people */
.ds-frame { position: relative; margin: 0; border-radius: var(--ds-radius-m); overflow: hidden; background: var(--sunken);
  box-shadow: 0 0 0 1px var(--card-border), 0 18px 40px -24px rgba(0, 0, 0, 0.45); }
.ds-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-frame--arch { border-radius: 999px 999px var(--ds-radius-m) var(--ds-radius-m) / 46% 46% var(--ds-radius-m) var(--ds-radius-m); }
.ds-frame--plain img { object-fit: contain; }
.ds-frame figcaption, .ds-credit { font-size: var(--ds-step--1); color: var(--muted); }

/* -------------------------------------------------------------------------------------- page transitions -- */
/* page to page: a soft lamp-glow dissolve (View Transitions, same-origin navigations), never for reduced motion */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ds-dissolve-out var(--ds-dur-glow) var(--ds-ease) both; }
::view-transition-new(root) { animation: ds-dissolve-in var(--ds-dur-glow) var(--ds-ease) both; }
@keyframes ds-dissolve-out { to { opacity: 0; filter: brightness(1.08) sepia(0.25); } }
@keyframes ds-dissolve-in { from { opacity: 0; filter: brightness(1.12) sepia(0.3); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  :root { --ds-dur-1: 0ms; --ds-dur-2: 0ms; --ds-dur-3: 0ms; --ds-dur-glow: 0ms; }
}