/* ==========================================================================
   THEME TOKENS
   Single source of truth for color across the site. Dark is the default/
   baseline theme (the site's original look, unchanged in value). Light is
   an intentionally-designed companion, not an inversion — see the
   [data-theme="light"] block below.

   Usage: every themed color in styles.css / mini.css should reference one
   of these custom properties rather than a literal hex/rgba value, so the
   whole site repaints from these two blocks alone.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- raw channels (for composing rgba() overlays) ---- */
  --surface-rgb: 255, 255, 255;   /* overlay tint used for cards/chips/borders */
  --shadow-rgb: 0, 0, 0;          /* elevation shadows */

  /* ---- base surfaces ---- */
  --bg: #0e0e0e;                  /* page background — body, sections, footer */
  --bg-elevated: #1a1a1a;         /* distinct chrome surface: highlight screenshot frame, PDF viewer chrome */

  /* ---- ink (text) scale, darkest→dimmest role, brightest→dimmest value ---- */
  --ink-1: #ffffff;               /* headings, strong emphasis */
  --ink-2: #dddddd;               /* body copy, nav links, footer */
  --ink-3: #b8b8b8;               /* secondary copy (highlight blurbs) */
  --ink-4: #a9a9a9;               /* tertiary labels (server role, contact labels, pdf status) */
  --ink-5: #7a7a7a;               /* dimmest captions (thumbnail subtitles) */

  /* ---- brand gold ---- */
  --gold: #e49b0f;                /* solid fills — primary buttons */
  --gold-deep: #c77a0a;           /* fill hover state */
  --gold-text: #ffd700;           /* gold used AS text/stroke/glow (nav hover, cursor, brushstroke, particles) */
  --heading-gradient: linear-gradient(90deg, rgba(255, 255, 0, 1) 23%, rgba(253, 218, 13, 1) 42%, rgba(228, 155, 15, 1) 63%);
  --brushstroke-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='10' viewBox='0 0 100 10'%3E%3Cpath d='M1,6 C18,3 38,8 58,5 C78,2 90,6 99,5' stroke='%23ffd700' stroke-width='3.5' stroke-linecap='round' fill='none' opacity='0.85'/%3E%3Cpath d='M2,7 C16,4 36,9 58,6 C78,3 91,7 99,6' stroke='%23e49b0f' stroke-width='1.5' stroke-linecap='round' fill='none' opacity='0.5'/%3E%3C/svg%3E");

  /* ---- links (inside server-card descriptions) ---- */
  --link: #008aff;
  --link-hover: #87ceeb;

  /* ---- surfaces: cards, chips, dividers ---- */
  --surface: rgba(var(--surface-rgb), 0.05);        /* project/server/video/thumbnail card fill */
  --surface-border: rgba(var(--surface-rgb), 0.1);  /* card hairline border */
  --surface-soft: rgba(var(--surface-rgb), 0.06);   /* icon chips, highlight-screenshot frame border */
  --surface-soft-hover: rgba(var(--surface-rgb), 0.12); /* icon chip hover */

  /* ---- form fields ---- */
  --input-border: rgba(var(--surface-rgb), 0.08);
  --input-placeholder: rgba(221, 221, 221, 0.55);

  /* ---- nav / header chrome ---- */
  --nav-hover-bg: #222222;
  --header-bg: rgba(5, 5, 5, 0.7);
  --header-bg-open: rgba(5, 5, 5, 0.92);   /* mobile dropdown panel */
  --header-ring: rgba(169, 169, 169, 0.7);

  /* ---- elevation shadows (semantic, reused everywhere) ---- */
  --shadow: rgba(var(--shadow-rgb), 0.2);         /* standard resting elevation */
  --shadow-hover: rgba(var(--shadow-rgb), 0.3);   /* lifted/hover elevation */
  --shadow-soft: rgba(var(--shadow-rgb), 0.45);   /* large soft shadow (highlight frame) */

  /* ---- CTA button glow system (.btn) ---- */
  --btn-shadow: rgba(var(--shadow-rgb), 0.2);
  --btn-shadow-hover: rgba(var(--shadow-rgb), 0.3);
  --btn-ring: rgba(228, 155, 15, 0.3);
  --btn-glow-weak: rgba(228, 155, 15, 0.3);
  --btn-glow-mid: rgba(228, 155, 15, 0.5);
  --btn-glow-strong: rgba(228, 155, 15, 0.7);

  /* ---- hero canvas + scroll cue ---- */
  --particle-color: rgba(255, 215, 0, 0.7);
  --particle-glow: #ffd700;
  --scroll-fg: #ffffff;

  /* ---- focus ring (themed for contrast; see [data-theme="light"]) ---- */
  --focus-ring: #ffd700;

  /* ---- constants: intentionally IDENTICAL in both themes ----
     Lightboxes/modals always sit on a dark scrim regardless of site theme —
     that's a deliberate, common pattern for media viewers, not an oversight. */
  --overlay-scrim: rgba(0, 0, 0, 0.8);
  --overlay-scrim-strong: rgba(0, 0, 0, 0.9);
  --modal-shadow: rgba(0, 0, 0, 0.5);
  --lightbox-shadow: rgba(0, 0, 0, 0.6);

  /* ---- scrollbar ---- */
  --scrollbar-track: rgba(var(--surface-rgb), 0.04);
  --scrollbar-thumb: var(--gold);
}

/* ==========================================================================
   LIGHT THEME — an intentional companion, not an inversion.

   Warm ivory paper instead of stark white; a deepened "gold-ink" stands in
   for --gold-text anywhere gold is read as TEXT (raw #ffd700/#e49b0f fail
   contrast on a light ground); the heading gradient is re-tuned into a
   richer amber→bronze range for the same reason. Fills that are already
   self-contained (white text on a solid gold button) are left untouched —
   the brand color should feel like the same brand in either theme.
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --surface-rgb: 44, 36, 28;      /* warm ink used for light-mode overlays */
  --shadow-rgb: 96, 74, 42;       /* warm umber shadows instead of flat black */

  --bg: #f7f3ea;
  --bg-elevated: #efe9dc;

  --ink-1: #1f1811;
  --ink-2: #332b20;
  --ink-3: #5b5040;
  --ink-4: #6e6150;
  --ink-5: #756852;

  --gold-text: #8a5c08;
  --heading-gradient: linear-gradient(90deg, #c17c0b 15%, #a8630a 50%, #8a4d0a 85%);
  --brushstroke-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='10' viewBox='0 0 100 10'%3E%3Cpath d='M1,6 C18,3 38,8 58,5 C78,2 90,6 99,5' stroke='%238a5c08' stroke-width='3.5' stroke-linecap='round' fill='none' opacity='0.9'/%3E%3Cpath d='M2,7 C16,4 36,9 58,6 C78,3 91,7 99,6' stroke='%23c17c0b' stroke-width='1.5' stroke-linecap='round' fill='none' opacity='0.55'/%3E%3C/svg%3E");

  --link: #0068c9;
  --link-hover: #0a5dc2;

  --surface: rgba(var(--surface-rgb), 0.05);
  --surface-border: rgba(var(--surface-rgb), 0.12);
  --surface-soft: rgba(var(--surface-rgb), 0.05);
  --surface-soft-hover: rgba(var(--surface-rgb), 0.11);

  --input-border: rgba(var(--surface-rgb), 0.1);
  --input-placeholder: rgba(var(--surface-rgb), 0.5);

  --nav-hover-bg: #efe6d1;
  --header-bg: rgba(255, 253, 247, 0.72);
  --header-bg-open: rgba(255, 253, 247, 0.95);
  --header-ring: rgba(150, 118, 70, 0.5);

  --shadow: rgba(var(--shadow-rgb), 0.14);
  --shadow-hover: rgba(var(--shadow-rgb), 0.2);
  --shadow-soft: rgba(var(--shadow-rgb), 0.18);

  --btn-shadow: rgba(var(--shadow-rgb), 0.16);
  --btn-shadow-hover: rgba(var(--shadow-rgb), 0.22);
  --btn-glow-weak: rgba(170, 116, 20, 0.18);
  --btn-glow-mid: rgba(170, 116, 20, 0.26);
  --btn-glow-strong: rgba(170, 116, 20, 0.34);

  --particle-color: rgba(154, 103, 18, 0.6);
  --particle-glow: #9a6712;
  --scroll-fg: #1f1811;

  --focus-ring: #8a5c08;

  --scrollbar-track: rgba(var(--surface-rgb), 0.05);
}

/* ==========================================================================
   Smooth theme transition
   Low specificity on purpose: any element with its own transition (buttons,
   cards, nav links, etc.) keeps its existing motion untouched; everything
   else still repaints smoothly when the theme flips.
   ========================================================================== */
*,
*::before,
*::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   Accessible focus states
   Applied to nav links, the theme toggle, and the hamburger. The contact
   form is deliberately excluded — no focus highlight at all, in either
   theme, matching the original design.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
.hamburger:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.form-input:focus,
.form-input:focus-visible,
.form-textarea:focus,
.form-textarea:focus-visible,
.form-submit:focus,
.form-submit:focus-visible {
  outline: none;
}

/* ==========================================================================
   Theme toggle
   Uses the same surface formula as the server/video/thumbnail cards (real
   border + flat drop shadow, no blur) so it reads as part of the card
   system rather than the header's glass chrome.
   ========================================================================== */
.theme-toggle {
  position: fixed;
  top: 1.85rem; /* centers on the header: header's own center sits at
                   1rem (top) + 1.5rem (padding) + 0.8rem (half the nav
                   row's 1.6-line-height text) = 3.3rem from viewport top;
                   minus half the toggle's own rendered height (46px content+
                   border / 2 = 23px = 1.4375rem) puts this at ~1.86rem */
  right: 1.25rem;
  z-index: 1010;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--surface-border);
  box-shadow: 0 4px 6px var(--shadow);
  color: var(--gold-text);
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:active {
  transform: scale(0.96);
}

.theme-toggle-icon {
  position: relative;
  width: 20px;
  height: 20px;
  display: block;
}

.theme-toggle-icon svg {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

[data-theme="light"] .icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

[data-theme="light"] .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

@media (max-width: 768px) {
  .theme-toggle {
    top: 30px;
    right: 1rem;
    width: 40px;
    height: 40px;
    border: none;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .theme-toggle-icon,
  .theme-toggle-icon svg {
    width: 18px;
    height: 18px;
  }
}

@media print {
  .theme-toggle {
    display: none;
  }
}

/* While a card's image modal or video lightbox is open, the close (×)
   control sits in the same top-right corner as the theme toggle. Hide the
   toggle for the duration so only the original close control is present —
   restored automatically once the overlay closes. */
body.modal-open .theme-toggle,
body.video-lightbox-open .theme-toggle {
  display: none;
}

/* ==========================================================================
   Scrollbar theming
   ========================================================================== */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}