/*
 * Design tokens + dark-theme overrides.
 * All component styles live in landing.css.
 * `stylesheet_link_tag :app` (Rails 8) auto-includes every .css file here.
 */

:root {
  --bg:           #f4ede0;
  --bg-elev:      #ebe2cf;
  --bg-warm:      #efe6d1;
  --ink:          #262819;
  --ink-soft:     rgba(38, 40, 25, 0.78);
  --ink-mute:     rgba(38, 40, 25, 0.55);
  --ink-faint:    rgba(38, 40, 25, 0.28);
  --rule:         rgba(38, 40, 25, 0.18);
  --rule-soft:    rgba(38, 40, 25, 0.09);
  --moss:         #989558;
  --moss-bright:  #57592e;
  --moss-deep:    #3d3e1f;
  --umber:        #8b6044;
  --umber-light:  #6b4a32;
  --beige:        #e5ded4;
  --cotton:       #1a1d10;
  --grain-op:     0.06;
  --grain-blend:  multiply;

  /* themable header band (light: UKLSH blue; dark: glassy dark) */
  --nav-bg:           rgba(105, 144, 168, 0.94);
  --nav-bg-scrolled:  #6990a8;
  --nav-ink:          #f9f9f9;
  --nav-ink-soft:     rgba(249, 249, 249, 0.82);
  --nav-rule:         rgba(255, 255, 255, 0.22);
  --nav-rule-strong:  rgba(255, 255, 255, 0.28);
  --nav-cta-hover-ink: #20384a;

  /* hero headline colour + glow (differs per theme) */
  --hero-headline-ink:    var(--cotton);
  --hero-headline-shadow: 0 0 32px rgba(244, 237, 224, 0.65), 0 1px 0 rgba(244, 237, 224, 0.40);

  --serif: "Merriweather", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --sans:  "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --container: 76rem;
  --pad-x:     clamp(1.25rem, 4vw, 3rem);
  --pad-y:     clamp(5rem, 10vw, 9rem);
}

[data-theme="dark"] {
  --bg:           #14180f;
  --bg-elev:      #1c2118;
  --bg-warm:      #221c14;
  --ink:          #ece5d2;
  --ink-soft:     rgba(236, 229, 210, 0.78);
  --ink-mute:     rgba(236, 229, 210, 0.52);
  --ink-faint:    rgba(236, 229, 210, 0.22);
  --rule:         rgba(236, 229, 210, 0.14);
  --rule-soft:    rgba(236, 229, 210, 0.07);
  --moss:         #9ea05a;
  --moss-bright:  #c1c382;
  --moss-deep:    #6b6e3d;
  --umber:        #8b6044;
  --umber-light:  #b8896b;
  --beige:        #e5ded4;
  --cotton:       #f2ead5;
  --grain-op:     0.045;
  --grain-blend:  overlay;

  --nav-bg:           linear-gradient(180deg, rgba(20, 24, 15, 0.85) 0%, rgba(20, 24, 15, 0.55) 100%);
  --nav-bg-scrolled:  rgba(20, 24, 15, 0.92);
  --nav-ink:          var(--ink);
  --nav-ink-soft:     var(--ink-soft);
  --nav-rule:         var(--rule-soft);
  --nav-rule-strong:  var(--rule);
  --nav-cta-hover-ink: var(--bg);

  --hero-headline-ink:    var(--cotton);
  --hero-headline-shadow: 0 0 40px rgba(20, 22, 12, 0.6), 0 1px 0 rgba(20, 22, 12, 0.4);
}