/* Theme palette
 *
 * The --cms-* variables are injected at runtime by cms_theme_style_tag,
 * driven by Setting#theme_colors. This file maps them to the legacy
 * --color-* and Lexxy editor variables used across the app.
 */

body.brand-theme {
  background: var(--cms-background, #e6eef5);
  color: var(--cms-text, #15171c);
}

/* ── Dark theme ─────────────────────────────────────────────
 * Light → dark token swap. Every utility (Tailwind @theme, the
 * landing/header/footer scoped vars, Lexxy editor colors) reads from
 * --cms-* / --design-*, so flipping just these tokens cascades through
 * the whole UI.
 *
 * Specificity 0,1,1 beats both the inline :root from cms_theme_style_tag
 * and theme_extras.css's :root, so it wins regardless of include order.
 * The FOWT script in application.html.erb toggles html.dark before
 * paint, so there's no flash.
 *
 * Design notes:
 *  - Surfaces invert: paper → ink, ink → paper. Body, .landing,
 *    .site-nav, .site-footer all follow.
 *  - Primary lifts brighter (sky #7eaad0) so links and emphasis hold
 *    legible contrast on the dark slab.
 *  - Sun stays — gold reads as gold on both daylight and night.
 *  - Inverted-band utilities (bg-ink text-cream on /videos hero,
 *    site-footer) flip with the theme: dark band → light band in
 *    dark mode. That's the cost of using semantic tokens; the layout
 *    structure survives, only the value-direction reverses.
 */
html.dark {
  /* cms-* — these are the Setting-editable seven tokens */
  --cms-primary:      #7eaad0;   /* sky-deep brightened for dark-bg contrast */
  --cms-primary-dark: #5a85a8;
  --cms-secondary:    #f0d670;   /* sun unchanged */
  --cms-accent:       #2a3441;   /* rule darkened */
  --cms-background:   #15171c;   /* was ink — page bg in dark */
  --cms-text-primary: #b6c8d8;   /* sky-soft for headings */
  --cms-text:         #e6eef5;   /* paper as body text */

  /* design-* extras — inverted to match */
  --design-paper-soft: #1d232b;
  --design-surface:    #22262e;
  --design-mist:       #3a4250;
  --design-rule-soft:  #2a323b;
  --design-sky:        #7eaad0;
  --design-sky-soft:   #4a6a8a;
  --design-sky-tint:   #1f2c39;
  --design-sun-deep:   #c4a13a;
  --design-sun-soft:   #6a591a;
  --design-sun-tint:   #1f1c10;
  --design-ink-muted:  #8a8e95;
  --design-ink-faint:  #6f7378;
}

/* Chrome that was designed dark from the start — the footer slab
 * and the /videos cinematic hero band — should render identically in
 * light and dark modes. Re-pin every cms-* / design-* token to its
 * light-mode value within these scopes, so the global html.dark token
 * swap doesn't reach them. The band visually merges with the dark
 * page bg in dark mode (both ink) — that's accepted; the design is
 * what matters.
 *
 * Specificity: html.dark .site-footer is (0,2,1), which beats both
 * html.dark (0,1,1) and any plain class rule (0,1,0).
 */
html.dark .site-footer,
html.dark #videos {
  /* Pin tokens so descendant utilities (text-cream-soft, text-sun-deep,
     border-rule/20, etc.) resolve to their light-mode values inside
     the band. */
  --cms-text:          #15171c;
  --cms-background:    #e6eef5;
  --cms-text-primary:  #3a3e48;
  --cms-accent:        #c5d2dc;
  --cms-primary:       #3d6889;
  --cms-secondary:     #f0d670;
  --design-paper-soft: #eff4f9;
  --design-surface:    #f8fbfd;
  --design-mist:       #cad7e3;
  --design-rule-soft:  #d8e2ea;
  --design-sky:        #6e95b8;
  --design-sky-soft:   #b6c8d8;
  --design-sky-tint:   #dde7ef;
  --design-sun-deep:   #a88c2c;
  --design-sun-soft:   #f7e7a0;
  --design-sun-tint:   #fcf3cf;
  --design-ink-muted:  #7a7e87;
  --design-ink-faint:  #a8aaa6;

  /* Also pin --color-ink / --color-cream-soft directly so the Tailwind
     bg-ink + text-cream-soft on the band itself resolve straight to
     literals — defending against any var-chain caching or layered-
     cascade quirk where the token pin above might not reach the @theme
     @layer in time. */
  --color-ink:         #15171c;
  --color-cream:       #e6eef5;
  --color-cream-soft:  #eff4f9;
  --color-paper:       #f8fbfd;
  --color-ink-soft:    #3a3e48;
  --color-ink-muted:   #7a7e87;
  --color-ink-faint:   #a8aaa6;
  --color-rule:        #c5d2dc;
  --color-rule-soft:   #d8e2ea;
  --color-sage-deep:   #3d6889;
  --color-peach:       #f7e7a0;
  --color-peach-deep:  #f0d670;
  --color-peach-soft:  #f7e7a0;
  --color-peach-tint:  #fcf3cf;
  --color-sun:         #f0d670;
  --color-sun-deep:    #a88c2c;
  --color-sun-soft:    #f7e7a0;
  --color-sun-tint:    #fcf3cf;
  --color-sky:         #6e95b8;
  --color-sky-deep:    #3d6889;
  --color-sky-soft:    #b6c8d8;
  --color-sky-tint:    #dde7ef;

  /* Belt-and-suspenders: also set background-color directly on the
     band root. Beats Tailwind's .bg-ink (0,1,0) since this selector
     is (1,1,1). */
  background-color: #15171c;
}

.brand-theme {
  --color-primary:         var(--cms-primary,       #6e8c75);
  --color-primary-header:  var(--cms-primary,       #6e8c75);
  --color-primary-darker:  var(--cms-primary-dark,  #4a4239);
  --color-primary-darkest: #1c1813;

  --color-secondary: var(--cms-secondary,    #d9a17f);
  --color-accent:    var(--cms-accent,       #e6dccb);
  --color-background: var(--cms-background,  #f5ede0);

  --color-text-primary: var(--cms-text-primary, var(--color-primary));
  --color-text:         var(--cms-text,         #2b2620);
}

/* Lexxy editor — inherit from theme palette */
.brand-theme {
  --lexxy-color-ink:           var(--color-text);
  --lexxy-color-ink-medium:    #7a6a58;
  --lexxy-color-ink-light:     #b3a290;
  --lexxy-color-ink-lighter:   var(--color-accent);
  --lexxy-color-ink-lightest:  var(--color-background);
  --lexxy-color-canvas:        var(--color-background);

  --lexxy-color-accent-dark:    var(--color-primary);
  --lexxy-color-accent-medium:  var(--color-secondary);
  --lexxy-color-accent-light:   var(--color-accent);
  --lexxy-color-accent-lightest: #f5efe6;
}

/* Lexxy dark mode */
.dark .lexxy-content,
.dark .lexxy-content p,
.dark .lexxy-content h1,
.dark .lexxy-content h2,
.dark .lexxy-content h3,
.dark .lexxy-content h4 {
  color: var(--color-accent);
}

.lexxy-content a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.lexxy-content a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  border-radius: 2px;
}

.dark .lexxy-content a {
  color: #d4a55a;
  border-bottom: 1px solid #7a5c30;
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.dark .lexxy-content a:hover {
  color: #e8b96a;
  border-bottom-color: #e8b96a;
  background-color: rgba(232, 185, 106, 0.08);
  border-radius: 2px;
}

.dark .lexxy-content blockquote {
  color: #b3a290;
  border-color: #3d2d1f;
}

.dark .lexxy-content code,
.dark .lexxy-content pre {
  background: #241810;
  color: #e8ddd0;
}

/* Responsive tables — stack columns on small screens */
@media (max-width: 640px) {
  .lexxy-content .lexxy-content__table-wrapper {
    overflow-x: unset;
  }

  .lexxy-content table,
  .lexxy-content tbody {
    display: block;
    width: 100%;
  }

  .lexxy-content thead {
    display: none;
  }

  .lexxy-content tr {
    display: block;
    margin-bottom: 0.75rem;
    border: 1px solid var(--lexxy-color-ink-lighter);
    border-radius: 4px;
    overflow: hidden;
  }

  .lexxy-content td {
    display: block;
    max-width: 100%;
    border: none;
    border-bottom: 1px solid var(--lexxy-color-ink-lighter);
    padding: 0.6rem 0.75rem;
  }

  .lexxy-content td:last-child {
    border-bottom: none;
  }
}

/* YouTube embed — responsive 16:9 */
.lexxy-youtube-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin: 1.5rem 0;
  border-radius: 0.375rem;
  overflow: hidden;
}

.lexxy-youtube-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

[data-controller~="photo-zoom"] img {
  cursor: zoom-in;
}

/* Photo zoom badge */
.photo-zoom-host {
  position: relative;
  display: inline-block;
}

.photo-zoom-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease;
  pointer-events: none;
  cursor: zoom-in;
}

.photo-zoom-host:hover .photo-zoom-badge,
.photo-zoom-badge {
  opacity: 0.55;
  pointer-events: auto;
}

.photo-zoom-host:hover .photo-zoom-badge {
  opacity: 1;
  background: rgba(0, 0, 0, 0.85);
}

/* Video archive thumbnails — subtle filter */
#videos img,
#videos-archive img {
  filter: sepia(0.5) saturate(0.55);
  transition: filter 0.3s ease;
}

#videos img:hover,
#videos-archive img:hover {
  filter: sepia(0.1) saturate(1);
}

/* Description expand modal */
.description-modal-card {
  background: var(--color-background);
  color: var(--color-text);
  border-radius: 0.5rem;
  max-width: 36rem;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

.dark .description-modal-card {
  background: var(--color-text);
  color: #d1d5db;
}

.description-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  transition: opacity 0.15s;
}

.description-modal-close:hover {
  opacity: 1;
}

/* Article body — magazine-style */
.article-body.lexxy-content {
  font-size: 19px;
  line-height: 1.7;
  color: var(--color-text);
}

.dark .article-body.lexxy-content {
  color: var(--color-accent);
}

.article-body.lexxy-content p {
  margin: 0 0 28px;
  text-wrap: pretty;
}

/* Drop cap on the first paragraph */
.article-body.lexxy-content > p:first-of-type::first-letter {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 86px;
  line-height: 0.86;
  float: left;
  padding: 6px 14px 0 0;
  color: var(--color-primary);
}

.dark .article-body.lexxy-content > p:first-of-type::first-letter {
  color: var(--color-accent);
}

/* Pull-quote */
.article-body.lexxy-content blockquote {
  max-width: 860px;
  margin: 40px -70px 48px;
  padding: 40px 0;
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-align: center;
  text-wrap: balance;
  color: var(--color-text);
  background: transparent;
}

.dark .article-body.lexxy-content blockquote {
  border-color: var(--color-primary-darker);
  color: var(--color-accent);
}

@media (max-width: 800px) {
  .article-body.lexxy-content blockquote {
    margin: 32px 0 36px;
    padding: 28px 0;
    font-size: 22px;
  }
}

/* About page body */
.lexxy-content.about-body > p:first-of-type::first-letter {
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  color: var(--color-primary);
  float: left;
  font-size: 78px;
  line-height: 0.88;
  padding-top: 6px;
  padding-right: 14px;
}

.lexxy-content.about-body blockquote {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: 28px;
  line-height: 1.4;
  color: var(--color-primary);
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  padding: 28px 0;
  margin: 36px 0;
  text-wrap: balance;
  quotes: none;
}
.lexxy-content.about-body blockquote::before,
.lexxy-content.about-body blockquote::after { content: none; }

.lexxy-content.about-body h2,
.lexxy-content.about-body h3 {
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 40px 0 14px 0;
}
.lexxy-content.about-body h2 { font-size: 22px; line-height: 1.25; }
.lexxy-content.about-body h3 { font-size: 18px; line-height: 1.3; }

.lexxy-content.about-body p {
  font-family: "Lora", Georgia, serif;
  font-size: 19px;
  line-height: 1.72;
  color: var(--color-text);
  margin: 0 0 24px 0;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .lexxy-content.about-body > p:first-of-type::first-letter {
    font-size: 60px;
    padding-top: 4px;
    padding-right: 10px;
  }
  .lexxy-content.about-body blockquote { font-size: 22px; padding: 22px 0; margin: 28px 0; }
  .lexxy-content.about-body p { font-size: 17px; line-height: 1.7; }
}

/* Colophon page body */
.lexxy-content.colophon-body p {
  font-family: "Lora", Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 18px 0;
  max-width: 720px;
  text-wrap: pretty;
}

.lexxy-content.colophon-body h2 {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 36px 0 14px 0;
}

/* Static markdown pages (PagesController) — styles for .page-prose
   wrapping kramdown's HTML output. Uses brand-theme variables so it
   tracks any palette change you make in Settings. */
.page-prose h2 {
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 40px 0 14px;
  color: var(--color-text);
}
.page-prose h3 {
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 28px 0 10px;
  color: var(--color-text);
}
.page-prose p { margin: 0 0 18px; }
.page-prose ul,
.page-prose ol { margin: 0 0 18px 1.5rem; padding: 0; }
.page-prose ul { list-style: disc outside; }
.page-prose ol { list-style: decimal outside; }
.page-prose li { margin-bottom: 6px; }
.page-prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-accent);
  transition: text-decoration-color 0.15s ease;
}
.page-prose a:hover { text-decoration-color: var(--color-primary); }
.page-prose hr {
  border: 0;
  border-top: 1px solid var(--color-accent);
  margin: 36px 0;
}
.page-prose code {
  font-family: ui-monospace, "Menlo", monospace;
  font-size: 0.92em;
  background: color-mix(in srgb, var(--color-accent) 40%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
}
.page-prose blockquote {
  border-left: 2px solid var(--color-accent);
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  font-style: italic;
  color: var(--color-text);
}
.dark .page-prose h2,
.dark .page-prose h3 { color: var(--color-accent); }
.dark .page-prose a { color: var(--color-accent); }
.dark .page-prose a:hover { text-decoration-color: var(--color-accent); }
.dark .page-prose code { background: var(--color-primary-darker); color: var(--color-accent); }
.dark .page-prose blockquote { border-left-color: var(--color-primary-darker); color: var(--color-accent); }