/* Dridian design system — assembled for WordPress (Astra child).
   Order: color, type, spacing tokens → base element styles → property skins.
   Fonts are enqueued separately in functions.php. */

/* ===== tokens/colors.css ===== */
/* Dridian — Color tokens (CORE)
   The core palette is warm and neutral so it belongs to no single property.
   Default parent surfaces are LIGHT (parchment) with dark warm-ink text.
   Skins may set dark moods and override ONLY --accent (+ variants).
*/
:root {
  /* ---- Raw brand palette ---------------------------------------- */
  --ink:              #17100E;   /* warm ink — text on light, dark surfaces on skins */
  --parchment:        #EFE3C6;   /* default parchment surface */
  --paper:            #F7EFDD;   /* lightest "paper" surface */
  --warm-gray:        #7A6A57;   /* warm mid-gray — secondary text */
  --warm-gray-soft:   #9C8B76;   /* muted / tertiary text */
  --hairline:         #DBCBA6;   /* hairline borders on light surfaces */
  --hairline-strong:  #C9B588;

  --aged-gold:        #A67D53;   /* everyday DECORATIVE accent — rules, borders, dividers.
                                    Also the PARENT'S own --accent. No special meaning. */
  --aged-gold-deep:   #8A6640;
  --aged-gold-soft:   #C6A47B;

  --divine-gold:      #F4C430;   /* RESERVED semantic — divine names ONLY (God, Jesus,
                                    Christ, LORD, Father, and He/Him/His of God).
                                    Brand-wide convention, sits atop every skin.
                                    Kept clearly distinct from earthy aged gold. */

  /* ---- Semantic aliases (parent / light mood default) ----------- */
  --surface-page:     var(--parchment);
  --surface-paper:    var(--paper);
  --surface-card:     var(--paper);
  --surface-raised:   #FBF6EA;
  --surface-sunken:   #E7D9B8;

  --text-heading:     var(--ink);
  --text-body:        #2A211C;    /* softened ink for long reading */
  --text-secondary:   var(--warm-gray);
  --text-muted:       var(--warm-gray-soft);
  --text-on-accent:   var(--paper);

  --border-hairline:  var(--hairline);
  --border-strong:    var(--hairline-strong);
  --rule-decorative:  var(--aged-gold);

  /* ---- The overridable accent (parent = aged gold) -------------- */
  --accent:           var(--aged-gold);
  --accent-hover:     var(--aged-gold-deep);
  --accent-press:     #6F4F2F;
  --accent-contrast:  var(--paper);    /* text/icon color on top of --accent */
  --accent-tint:      rgba(166,125,83,0.12); /* faint accent wash for subtle fills */

  /* ---- Focus ring (accessibility) ------------------------------- */
  --focus-ring:       0 0 0 3px rgba(166,125,83,0.45);
}

/* ===== tokens/typography.css ===== */
/* Dridian — Typography tokens (CORE)
   Inherited site-wide and NOT overridable by a skin, except the optional
   --font-display, which a property may set for its title/chapter headings.
*/
:root {
  /* ---- Families ------------------------------------------------- */
  --font-ui:       'Alegreya Sans', system-ui, sans-serif;   /* headings & UI */
  --font-reading:  'Crimson Pro', Georgia, serif;            /* long-form prose */
  --font-smallcaps:'Alegreya Sans SC', var(--font-ui);       /* kickers / labels */

  /* Overridable display face. Parent falls back to the UI face. */
  --font-display:  var(--font-ui);

  /* ---- Type scale (rem, 16px base) — modular ~1.22 -------------- */
  --text-2xs:  0.6875rem;  /* 11px — legal / captions */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px — UI baseline */
  --text-md:   1.1875rem;  /* 19px — reading baseline */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.1875rem;  /* 35px */
  --text-3xl:  2.75rem;    /* 44px */
  --text-4xl:  3.5rem;     /* 56px */
  --text-5xl:  4.5rem;     /* 72px — hero display */

  /* ---- Weights -------------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---- Line heights --------------------------------------------- */
  --leading-none:    1;
  --leading-tight:   1.14;   /* display headings */
  --leading-snug:    1.28;   /* sub-headings */
  --leading-normal:  1.5;    /* UI copy */
  --leading-relaxed: 1.72;   /* long-form reading */

  /* ---- Letter spacing ------------------------------------------- */
  --tracking-tight:  -0.015em;  /* large display */
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;    /* small-caps kickers */
  --tracking-wider:  0.16em;    /* eyebrow labels */

  /* ---- Prose measure -------------------------------------------- */
  --measure-prose:   68ch;      /* readable line length cap */
  --measure-narrow:  46ch;
}

/* ===== tokens/spacing.css ===== */
/* Dridian — Spacing, radii, layout & elevation tokens (CORE)
   4px base unit. Inherited and NOT overridable per property.
*/
:root {
  /* ---- Spacing scale (4px base) --------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.5rem;    /* 24px */
  --space-6:   2rem;      /* 32px */
  --space-7:   2.5rem;    /* 40px */
  --space-8:   3rem;      /* 48px */
  --space-9:   4rem;      /* 64px */
  --space-10:  5rem;      /* 80px */
  --space-11:  6rem;      /* 96px */
  --space-12:  8rem;      /* 128px */

  /* ---- Radii — soft corners, nothing sharp on interactive UI ---- */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Layout / grid -------------------------------------------- */
  --grid-columns:   12; /* @kind other */
  --grid-gutter:    var(--space-5);
  --container-max:  1200px;   /* content shell width */
  --container-wide: 1360px;
  --container-prose: 720px;

  /* ---- Elevation (warm, low-contrast shadows) ------------------- */
  --shadow-xs:  0 1px 2px rgba(23,16,14,0.06);
  --shadow-sm:  0 2px 6px rgba(23,16,14,0.08);
  --shadow-md:  0 6px 20px rgba(23,16,14,0.10);
  --shadow-lg:  0 18px 48px rgba(23,16,14,0.16);
  /* On dark skins, elevation reads as a soft glow — skins may set --shadow-glow */
  --shadow-glow: none;

  /* ---- Motion (respect prefers-reduced-motion; no overshoot) ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:  120ms; /* @kind other */
  --dur-base:  220ms; /* @kind other */
  --dur-slow:  420ms; /* @kind other */
}

/* ===== tokens/base.css ===== */
/* Dridian — Base element styles & core utilities.
   Minimal, token-driven resets and the site-wide conventions
   (divine-name gold, decorative rules, prose measure, small-caps kicker).
*/

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-5); text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 0.15em;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--accent-hover); }

/* ---- Layout shell ---------------------------------------------- */
.dridian-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.dridian-container--wide { max-width: var(--container-wide); }

.dridian-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

/* ---- Prose — readable long-form reading ------------------------ */
.dridian-prose {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  max-width: var(--measure-prose);
}
.dridian-prose p + p { margin-top: 0; }

/* ---- Small-caps kicker / eyebrow ------------------------------- */
.dridian-kicker {
  font-family: var(--font-smallcaps);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
}

/* ---- Decorative hairline rule (aged gold) ---------------------- */
.dridian-rule {
  border: 0;
  height: 1px;
  background: var(--rule-decorative);
  opacity: 0.5;
  margin: var(--space-6) 0;
}
.dridian-rule--ornament {
  height: 1px;
  background: none;
  text-align: center;
  overflow: visible;
  opacity: 1;
}

/* ---- Divine-name gold — RESERVED semantic convention ------------
   Use ONLY on the divine names: God, Jesus, Christ, LORD, Father,
   and He/Him/His when referring to God. Never decorative. */
.divine {
  color: var(--divine-gold);
  font-style: inherit;
}

:where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== skins/lily.css ===== */
/* SKIN — "Lily of Our Valley" (book). Instance #1 of the skin system.
   A deep night-valley theme drawn from the book cover.

   SKIN CONTRACT — this file touches ONLY what a property is allowed to:
     • --accent (+ hover / press / contrast)
     • mood surfaces & on-surface text (dark night mood by default; a lighter
       daytime-valley mood via [data-mood="day"])
     • --font-display  (Crushed)
   Plus its own SCOPED additions (secondary green, script/small-caps faces,
   starfield glow) which EXTEND core — they never alter core fonts, spacing,
   radii, grid, nav or footer.
*/
.skin-lily {
  /* Overridable accent — violet with a lilac glow */
  --accent:          #5B3E8E;
  --accent-hover:    #6E4DA6;
  --accent-press:    #4A3173;
  --accent-contrast: #F5F3FF;
  --accent-tint:     rgba(155,123,201,0.18);
  --focus-ring:      0 0 0 3px rgba(155,123,201,0.55);

  /* Mood: night (default) — near-black indigo surfaces, star-white text */
  --surface-page:    #1B1440;
  --surface-paper:   #221A4E;
  --surface-card:    #251C56;
  --surface-raised:  #2C2263;
  --surface-sunken:  #150F33;

  --text-heading:    #D6CBEF;   /* lavender display */
  --text-body:       #E7E1F6;
  --text-secondary:  #A79BC9;
  --text-muted:      #8478A6;
  --text-on-accent:  #F5F3FF;

  --border-hairline: rgba(155,123,201,0.28);
  --border-strong:   rgba(155,123,201,0.5);
  --rule-decorative: #9B7BC9;

  /* Optional display face — Crushed for title & chapter headings */
  --font-display:    'Crushed', var(--font-ui);

  /* Scoped additions (extend core, do not replace it) */
  --lily-lilac:      #9B7BC9;   /* lilac glow */
  --lily-star:       #F5F3FF;   /* star-white */
  --lily-green:      #3E9B4F;   /* lily-leaf green — secondary */
  --font-script:     'Caveat', cursive;      /* taglines / pull-quotes */
  --font-label:      'Alegreya Sans SC', var(--font-ui); /* small-caps labels */

  /* Dark-mood elevation reads as a soft violet glow */
  --shadow-sm:  0 2px 10px rgba(0,0,0,0.5);
  --shadow-md:  0 10px 30px rgba(0,0,0,0.55);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 40px rgba(155,123,201,0.35);

  background: var(--surface-page);
  color: var(--text-body);
}

/* Night sky: a quiet starfield wash behind the page */
.skin-lily {
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(245,243,255,0.9), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(214,203,239,0.7), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(245,243,255,0.8), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(214,203,239,0.6), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(245,243,255,0.7), transparent),
    radial-gradient(1px 1px at 12% 82%, rgba(245,243,255,0.6), transparent),
    radial-gradient(1200px 700px at 50% -10%, rgba(91,62,142,0.35), transparent 70%);
  background-attachment: fixed;
}

/* Lily display headings use Crushed with a calmer letter-spacing */
.skin-lily h1, .skin-lily h2, .skin-lily .lily-title {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  color: var(--text-heading);
  font-weight: 400;
}

/* Daytime-valley mood — lighter surfaces, same violet accent & motifs */
.skin-lily[data-mood="day"] {
  --surface-page:    #E9E4F5;
  --surface-paper:   #F2EEFA;
  --surface-card:    #FBF9FF;
  --surface-raised:  #FFFFFF;
  --surface-sunken:  #DED6F0;

  --text-heading:    #2E2358;
  --text-body:       #2A2350;
  --text-secondary:  #5B4F86;
  --text-muted:      #7E739E;

  --border-hairline: rgba(91,62,142,0.22);
  --border-strong:   rgba(91,62,142,0.4);

  --shadow-sm:  0 2px 6px rgba(45,30,80,0.10);
  --shadow-md:  0 10px 30px rgba(45,30,80,0.14);
  --shadow-lg:  0 24px 64px rgba(45,30,80,0.18);
  --shadow-glow: none;
  background-image:
    radial-gradient(1100px 600px at 50% -10%, rgba(155,123,201,0.22), transparent 70%);
}

/* ===== skins/word-in-stone.css ===== */
/* SKIN — "The Word in Stone" (YouTube channel, WEB presence only).
   A separate, already-designed channel brand brought in as a Dridian skin.
   YouTube-native assets (banners, thumbnails, title cards) are OUT OF SCOPE.

   SKIN CONTRACT — touches ONLY: --accent (+ variants), a warm lamp-lit dark
   mood, and --font-display (Cormorant Garamond). Its scoped additions — the
   claim-headline face (Anton), the source-citation line and "honest turn"
   callout — EXTEND core; body/UI (Crimson Pro / Alegreya Sans), spacing, grid,
   nav and footer are inherited unchanged, proving a warm property shares the
   same shell as the cool Lily skin.
*/
.skin-word-in-stone {
  /* Overridable accent — terracotta */
  --accent:          #C48B4E;
  --accent-hover:    #D89E5E;
  --accent-press:    #A5723C;
  --accent-contrast: #1A130C;
  --accent-tint:     rgba(196,139,78,0.16);
  --focus-ring:      0 0 0 3px rgba(196,139,78,0.5);

  /* Mood: earthy, warm, lamp-lit dark */
  --surface-page:    #1A130C;
  --surface-paper:   #22190F;
  --surface-card:    #2A1F13;
  --surface-raised:  #33261700;
  --surface-raised:  #342816;
  --surface-sunken:  #130E08;

  --text-heading:    #F2E4CE;
  --text-body:       #E9DCC5;
  --text-secondary:  #B7A184;
  --text-muted:      #8C7860;
  --text-on-accent:  #1A130C;

  --border-hairline: rgba(196,139,78,0.3);
  --border-strong:   rgba(196,139,78,0.55);
  --rule-decorative: #C48B4E;

  /* Optional display face — Cormorant Garamond for titles */
  --font-display:    'Cormorant Garamond', var(--font-reading);

  /* Scoped additions */
  --wis-headline:    'Anton', var(--font-ui);   /* heavy condensed claim headlines */
  --wis-gold-rim:    #D9A860;
  --wis-lamp-glow:   #F4B860;

  --shadow-sm:  0 2px 10px rgba(0,0,0,0.5);
  --shadow-md:  0 12px 34px rgba(0,0,0,0.6);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.66);
  --shadow-glow: 0 0 60px rgba(196,139,78,0.3);

  background: var(--surface-page);
  color: var(--text-body);
  /* Warm vignette / gold-glow */
  background-image:
    radial-gradient(900px 520px at 50% 0%, rgba(196,139,78,0.22), transparent 68%),
    radial-gradient(700px 700px at 80% 120%, rgba(120,70,25,0.28), transparent 70%);
  background-attachment: fixed;
}

.skin-word-in-stone h1,
.skin-word-in-stone h2,
.skin-word-in-stone h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}

/* ===== skins/harbor.css ===== */
/* SKIN — "Harbor Light" (PLACEHOLDER alternate book skin).
   A deliberately different third skin, used on the design-system reference page
   only, to prove a third property inherits the very same shell as Lily and
   The Word in Stone. Clearly distinct from Lily: a LIGHT, airy dawn-coast mood
   with a sea-glass teal accent (not violet, not terracotta).

   SKIN CONTRACT — touches ONLY --accent (+ variants) and a light mood; keeps
   the parent's core display fallback. Illustrative, not a live property.
*/
.skin-harbor {
  --accent:          #2F7E8C;
  --accent-hover:    #3A96A6;
  --accent-press:    #256571;
  --accent-contrast: #F4F8F8;
  --accent-tint:     rgba(47,126,140,0.12);
  --focus-ring:      0 0 0 3px rgba(47,126,140,0.4);

  /* Mood: light, cool-warm dawn */
  --surface-page:    #EAF0EE;
  --surface-paper:   #F4F8F6;
  --surface-card:    #FFFFFF;
  --surface-raised:  #FFFFFF;
  --surface-sunken:  #DCE6E3;

  --text-heading:    #14322F;
  --text-body:       #1E3A38;
  --text-secondary:  #557873;
  --text-muted:      #7C9691;
  --text-on-accent:  #F4F8F8;

  --border-hairline: rgba(47,126,140,0.2);
  --border-strong:   rgba(47,126,140,0.38);
  --rule-decorative: #2F7E8C;

  --shadow-sm:  0 2px 6px rgba(20,50,47,0.08);
  --shadow-md:  0 10px 28px rgba(20,50,47,0.12);
  --shadow-lg:  0 22px 60px rgba(20,50,47,0.16);
  --shadow-glow: none;

  background: var(--surface-page);
  color: var(--text-body);
}