/* Clean Copy Lab — design tokens.
 *
 * Light values are lifted from the live Astra/Elementor site so his existing
 * aesthetic is preserved exactly (he asked for this at 12:27). Dark values are
 * new, and are the reason the toggle at 21:45 can exist.
 *
 * Three-state theming: bare :root is light; the media query handles viewers on
 * "system"; the [data-theme] blocks let the header button win either way.
 * Never define a colour only inside a media or [data-theme] block.
 */

:root {
  /* Tells the browser to theme native scrollbars, form controls
   * and the caret. Without it they stay light on the dark theme. */
  color-scheme: light;

  /* Brand */
  --ccl-blue:        #046bd2;
  --ccl-blue-hover:  #045cb4;
  --ccl-rust:        #b5722e;  /* section eyebrows, sampled from the logo ring */

  /* Surfaces */
  --ccl-bg:          #ffffff;
  --ccl-bg-band:     #f0f5fa;  /* alternating section bands */
  --ccl-card:        #ffffff;
  --ccl-border:      #d1d5db;

  /* Text */
  --ccl-heading:     #111111;
  --ccl-text:        #1e293b;
  --ccl-muted:       #334155;
  --ccl-on-brand:    #ffffff;

  /* Type — Lora display, Lato body, both already on the live site */
  --ccl-display: Lora, Georgia, "Times New Roman", serif;
  --ccl-body:    Lato, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ccl-radius: 6px;
  --ccl-shadow: 0 1px 3px rgba(17, 17, 17, .06);
  --ccl-measure: 65ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ccl-blue:        #5aa3ea;
    --ccl-blue-hover:  #82bcf3;
    --ccl-rust:        #d69255;

    --ccl-bg:          #0f141b;
    --ccl-bg-band:     #151c25;
    --ccl-card:        #171f29;
    --ccl-border:      #2a333f;

    --ccl-heading:     #f2f5f9;
    --ccl-text:        #dbe2ea;
    --ccl-muted:       #a3aebd;
    --ccl-on-brand:    #0f141b;

    --ccl-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ccl-blue:        #5aa3ea;
  --ccl-blue-hover:  #82bcf3;
  --ccl-rust:        #d69255;

  --ccl-bg:          #0f141b;
  --ccl-bg-band:     #151c25;
  --ccl-card:        #171f29;
  --ccl-border:      #2a333f;

  --ccl-heading:     #f2f5f9;
  --ccl-text:        #dbe2ea;
  --ccl-muted:       #a3aebd;
  --ccl-on-brand:    #0f141b;

  --ccl-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

/* Bug 1 from design-tokens.md: the old site scrolled sideways on a phone
 * because card text overflowed. Belt and braces at the root. */
html, body { max-width: 100%; overflow-x: hidden; }
body { background: var(--ccl-bg); color: var(--ccl-text); font-family: var(--ccl-body); }
h1, h2, h3, .ccl-wordmark { font-family: var(--ccl-display); color: var(--ccl-heading); text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}