/* ==========================================================================
   Lights Camera Ase — style.css
   --------------------------------------------------------------------------
   COLOR SWAPPING:
   All colors live in two layers.

   1. The raw palette (--palette-*) — the actual hex values. Swap a hex here
      and it propagates everywhere that color is used.
   2. Semantic roles (--color-*) — what each color is *for* (background,
      text, accent...). To re-assign a role to a different palette color,
      just point the role at another --palette-* variable.

   Nothing below the token blocks references a hex value directly.
   ========================================================================== */

:root {
  /* ----- 1. Raw palette ------------------------------------------------- */
  --palette-forest: #002500;
  --palette-plum:   #513b3c;
  --palette-mint:   #17b890;
  --palette-azure:  #008dd5;
  --palette-coral:  #ed6a5a;
  --palette-cream:  #f3dfc1;

  /* ----- Type scale (fluid) --------------------------------------------- */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);

  /* ----- Spacing (4px base) --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ----- Fonts ----------------------------------------------------------- */
  --font-display: 'Clash Display', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;

  /* ----- Misc ------------------------------------------------------------ */
  --content-narrow: 640px;
  --content-wide: 1200px;
  --radius-sm: 0.375rem;
  --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----- 2. Semantic roles — LIGHT (default) ------------------------------ */
:root,
[data-theme='light'] {
  --color-bg:         var(--palette-cream);
  --color-text:       var(--palette-forest);
  --color-text-muted: var(--palette-plum);
  --color-accent:     var(--palette-coral);   /* decorative highlights   */
  --color-on-accent:  var(--palette-forest);  /* text on accent surfaces */
  --color-link:       var(--palette-azure);   /* links & interactive     */
  --color-mark:       var(--palette-mint);    /* logo accent             */
  --color-divider:    color-mix(in oklab, var(--palette-plum) 30%, var(--palette-cream));
}

/* ----- 2. Semantic roles — DARK ------------------------------------------ */
[data-theme='dark'] {
  --color-bg:         var(--palette-plum);
  --color-text:       var(--palette-cream);
  --color-text-muted: color-mix(in oklab, var(--palette-cream) 78%, var(--palette-plum));
  --color-accent:     var(--palette-coral);
  --color-on-accent:  var(--palette-forest);
  --color-link:       var(--palette-mint);
  --color-mark:       var(--palette-mint);
  --color-divider:    color-mix(in oklab, var(--palette-cream) 22%, var(--palette-plum));
}

/* System preference fallback for users who haven't touched the toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:         var(--palette-plum);
    --color-text:       var(--palette-cream);
    --color-text-muted: color-mix(in oklab, var(--palette-cream) 78%, var(--palette-plum));
    --color-accent:     var(--palette-coral);
    --color-on-accent:  var(--palette-forest);
    --color-link:       var(--palette-mint);
    --color-mark:       var(--palette-mint);
    --color-divider:    color-mix(in oklab, var(--palette-cream) 22%, var(--palette-plum));
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition:
    background-color var(--transition-interactive),
    color var(--transition-interactive);
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2 {
  text-wrap: balance;
  line-height: 1.1;
}

p {
  text-wrap: pretty;
  max-width: 65ch;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-interactive);
}

a:hover {
  color: var(--color-accent);
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: color-mix(in oklab, var(--color-accent) 30%, transparent);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
  width: min(100% - 2 * var(--space-6), var(--content-wide));
  margin-inline: auto;
}

/* ----- Top: logo + theme toggle ------------------------------------------ */

.hero-top {
  padding-top: var(--space-6);
}

.hero-top .wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--color-text-muted);
}

.theme-toggle:hover {
  color: var(--color-accent);
}

/* ----- Logo -------------------------------------------------------------- */

/* 66% of the viewport height, capped so the (wider-than-tall) logo never
   overflows the container on narrow screens. The logo's uncolored paths
   inherit the fill, so the dark parts of the wordmark follow the theme
   (forest on cream, cream on plum). */
.hero-logo {
  height: min(66vh, calc(56vw - 44px));
  height: min(66svh, calc(56vw - 44px));
  width: auto;
  fill: var(--color-text);
  transition: fill var(--transition-interactive);
}

/* ----- Content ------------------------------------------------------------ */

.content {
  flex: 1;
  padding-block: var(--space-8) clamp(var(--space-12), 6vw, var(--space-16));
}

.content .tagline {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.section {
  margin-top: var(--space-12);
}

.section h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.section p {
  color: var(--color-text-muted);
}

.section p + p,
.section ul {
  margin-top: var(--space-4);
}

.section ul {
  color: var(--color-text-muted);
  padding-left: 1.25em;
  display: grid;
  gap: var(--space-2);
}

.section li::marker {
  color: var(--color-accent);
}

/* ----- Call to action ------------------------------------------------------
   .button is currently unused (CTA is plain text for now) but kept ready
   for when the discovery-call button returns. */

.cta .button {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-full);
}

.cta .button:hover {
  background: color-mix(in oklab, var(--color-accent) 85%, var(--color-on-accent));
  color: var(--color-on-accent);
}

/* ----- Footer ------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  align-items: baseline;
  justify-content: space-between;
}

.site-footer .contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.site-footer .fineprint {
  font-size: var(--text-xs);
}