/* ============================================================================
   Represented — design tokens + modern base
   ============================================================================
   Single source of truth for the editorial-legal design system.

   Why this file exists: every one of the 16 templates used to declare its own
   duplicate :root block. They had already drifted apart (account/signup were
   on a 14px radius while everything else was 18px; landing had a typo'd
   --forest-deep with a stray alpha channel that broke every CTA hover state).
   One file means one place to change a colour, and dark mode defined once
   instead of sixteen times.

   Loaded via <link> before each template's inline <style>, so a template can
   still override a token locally when it genuinely needs to. Two do, and both
   are marked in their own files.

   LIGHT VALUES ARE UNCHANGED from the locked 2026-06-21 design system. Nothing
   in here is meant to alter the light-mode look.
   ========================================================================= */

@layer tokens, base, components, utilities;

@layer tokens {
  /* ── Dark is the default ─────────────────────────────────────────────────
     The unstamped document is DARK. Light is the opt-in, chosen with the
     toggle, which stamps data-theme="light" before first paint.

     This deliberately ignores prefers-color-scheme: a visitor on a light OS
     still gets dark, because the product has one intended look rather than
     two equal ones. The toggle is how someone opts out, and their choice
     persists in localStorage.

     Deliberately WARM dark, not the usual cold slate. The identity is ivory
     paper and evergreen ink; the dark counterpart is a deep forest-brown so
     it reads as the same brand at night rather than a different product.
     Greens and brass are lifted for legibility against a dark ground, since
     values tuned for contrast on cream go muddy when inverted.
     ──────────────────────────────────────────────────────────────────────── */
  :root,
  :root[data-theme="dark"] {
    color-scheme: dark;


    --paper:       #141714;
    --surface:     #1C201C;
    --surface-2:   #232823;

    --ink:         #F2EEE3;
    --ink-soft:    #D6D2C6;
    --dim:         #A5A093;
    --faint:       #949082;   /* lifted from #7C776C: 3.70:1 on --surface failed AA */

    --line:        #2E332D;
    --line-soft:   #282D28;

    --forest:      #34B583;
    --forest-deep: #7FD9B4;
    --forest-soft: #17301F;
    --brass:       #E5B65A;
    --brass-lt:    #F0C97A;
    --brass-soft:  #2E2617;
    --brass-text:  #E5B65A;   /* on a dark ground the fill value IS legible as text */

    --rose:         #F08872;
    --rose-soft:    #34211D;
    --success:      #57C293;
    --success-soft: #16291F;

    /* Label colour for a filled accent button. White works on the light-mode
       accents but fails on the dark-mode ones: the greens and brass are lifted
       for legibility against a dark ground, and a lifted accent needs dark ink
       on it, not white. --forest at #34B583 with white text is 2.6:1. */
    --on-accent:    #141714;
    --on-brass:     #141714;

    --shadow-sm:   0 1px 2px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.24);
    --shadow-md:   0 4px 22px rgba(0,0,0,0.40);
    --shadow-lg:   0 24px 60px rgba(0,0,0,0.55);
    --shadow:      var(--shadow-md);

    --wash-1: rgba(52,181,131,0.07);
    --wash-2: rgba(229,182,90,0.05);
  }

  /* ── Light: the opt-in ───────────────────────────────────────────────────
     Restates the whole set so the toggle wins in both directions. */
  :root[data-theme="light"] {
    color-scheme: light;


    /* ── Surfaces ── */
    --paper:       #FAF3E2;
    --surface:     #FFFFFF;
    --surface-2:   #FDF9EE;

    /* ── Text ── */
    --ink:         #1B241F;
    --ink-soft:    #3D453E;
    --dim:         #5A574E;
    --faint:       #726D5A;

    /* ── Hairlines ── */
    --line:        #EFE6D2;
    --line-soft:   #EFEADF;

    /* ── Brand ── */
    --forest:      #0C7A53;
    --forest-deep: #0B5940;
    --forest-soft: #DFF6EA;
    --brass:       #D19A2E;
    --brass-lt:    #E0B24A;
    --brass-soft:  #FBEFD2;
    --brass-text:  #7A5810;   /* labels and eyebrows; --brass itself is 2.2:1 as text */

    /* ── Semantic ── */
    --rose:         #E2604A;
    --rose-soft:    #FDECE8;
    --success:      #2E7D5B;
    --success-soft: #E5F2EB;
    --on-accent:    #FFFFFF;
    --on-brass:     #2A1F08;

    /* ── Geometry ── */
    --radius:      18px;
    --radius-sm:   12px;
    --radius-lg:   24px;

    /* ── Elevation ── */
    --shadow-sm:   0 1px 2px rgba(27,36,31,0.04), 0 2px 6px rgba(27,36,31,0.04);
    --shadow-md:   0 4px 22px rgba(27,36,31,0.07);
    --shadow-lg:   0 24px 60px rgba(27,36,31,0.12);
    --shadow:      var(--shadow-md);   /* legacy alias, used by account/signup */

    /* ── Backdrop wash ──
       Pulled out of body::before so dark mode can retune it without each
       template redeclaring the gradient. */
    --wash-1: rgba(14,138,95,0.06);
    --wash-2: rgba(209,154,46,0.05);

    /* ── Fluid type ──
       Body was a hard 15px everywhere. This keeps 15px as the floor on small
       screens and lets it breathe slightly on large ones, without changing
       the visual weight of the design. */
    --text-body: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0125rem);
  }

  /* ── Print is always light ───────────────────────────────────────────────
     The Court Prep Packet is a document people carry into a courtroom, and
     its print rules set a white background while taking text colour from
     --ink. Under a dark default that is near-white ink on white paper: a
     blank packet, discovered at the printer, usually the night before a
     hearing. Print forces the light palette regardless of the chosen theme.
     ──────────────────────────────────────────────────────────────────────── */
  @media print {
    :root, :root[data-theme="dark"], :root[data-theme="light"] {
      color-scheme: light;


    /* ── Surfaces ── */
    --paper:       #FAF3E2;
    --surface:     #FFFFFF;
    --surface-2:   #FDF9EE;

    /* ── Text ── */
    --ink:         #1B241F;
    --ink-soft:    #3D453E;
    --dim:         #5A574E;
    --faint:       #726D5A;

    /* ── Hairlines ── */
    --line:        #EFE6D2;
    --line-soft:   #EFEADF;

    /* ── Brand ── */
    --forest:      #0C7A53;
    --forest-deep: #0B5940;
    --forest-soft: #DFF6EA;
    --brass:       #D19A2E;
    --brass-lt:    #E0B24A;
    --brass-soft:  #FBEFD2;
    --brass-text:  #7A5810;   /* labels and eyebrows; --brass itself is 2.2:1 as text */

    /* ── Semantic ── */
    --rose:         #E2604A;
    --rose-soft:    #FDECE8;
    --success:      #2E7D5B;
    --success-soft: #E5F2EB;
    --on-accent:    #FFFFFF;
    --on-brass:     #2A1F08;

    /* ── Geometry ── */
    --radius:      18px;
    --radius-sm:   12px;
    --radius-lg:   24px;

    /* ── Elevation ── */
    --shadow-sm:   0 1px 2px rgba(27,36,31,0.04), 0 2px 6px rgba(27,36,31,0.04);
    --shadow-md:   0 4px 22px rgba(27,36,31,0.07);
    --shadow-lg:   0 24px 60px rgba(27,36,31,0.12);
    --shadow:      var(--shadow-md);   /* legacy alias, used by account/signup */

    /* ── Backdrop wash ──
       Pulled out of body::before so dark mode can retune it without each
       template redeclaring the gradient. */
    --wash-1: rgba(14,138,95,0.06);
    --wash-2: rgba(209,154,46,0.05);

    /* ── Fluid type ──
       Body was a hard 15px everywhere. This keeps 15px as the floor on small
       screens and lets it breathe slightly on large ones, without changing
       the visual weight of the design. */
    --text-body: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0125rem);

      /* Shadows cost toner and render as grey smears. */
      --shadow-sm: none;
      --shadow-md: none;
      --shadow-lg: none;
      --shadow:    none;
      --wash-1:    transparent;
      --wash-2:    transparent;
    }
  }
}

@layer base {
  /* Native form controls (checkboxes, radios, range) rendered in the OS default
     blue against a cream page. This is the one-line fix. */
  :root {
    accent-color: var(--forest);
  }

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

  /* Headlines wrapped awkwardly ("The legal system wasn't built / for you.").
     balance evens the line lengths; pretty stops single-word orphans in body
     copy. Both degrade silently where unsupported. */
  h1, h2, h3, .serif {
    text-wrap: balance;
  }
  p, li {
    text-wrap: pretty;
  }

  /* Selection + caret picked up the browser default blue. */
  ::selection {
    background: var(--forest-soft);
    color: var(--ink);
  }
  :root {
    caret-color: var(--forest);
  }

  /* Theme transition. Scoped to the properties that actually change so we
     don't animate layout, and skipped entirely for reduced-motion users. */
  @media (prefers-reduced-motion: no-preference) {
    body,
    .card, .panel, .header, .surface,
    input, textarea, select, button {
      transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
    }
  }
}

@layer utilities {
  /* Theme toggle button. Deliberately quiet — it sits in the header next to
     the help button and should read as a utility, not a feature. */
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dim);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
  }
  .theme-toggle:hover {
    background: var(--forest-soft);
    color: var(--forest-deep);
  }
  .theme-toggle:focus-visible {
    outline: 2px solid var(--forest);
    outline-offset: 2px;
  }
  .theme-toggle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Sun means "click for light", moon means "click for dark". Dark is the
     default, so the sun is what an unstamped document shows. */
  .theme-toggle .icon-sun  { display: block; }
  .theme-toggle .icon-moon { display: none; }
  :root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
  :root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
}