/* Overtake — theme scopes.

   tokens/colors.css is the brand kit's ground truth and is copied byte-for-byte.
   It defines two things only: a dark `:root` and a per-section `[data-surface="light"]`.

   A website needs two more scopes on top of that:

     [data-theme="light"]   the whole document flips (the header toggle writes this
                            onto <html> and persists it)
     [data-surface="dark"]  a single section opts back to Asphalt inside a light
                            document — how the header, the footer and the CTA strip
                            in "Leasevormen" stay dark in either theme

   Both blocks below mirror tokens/colors.css exactly. If a value changes there,
   change it here too. Nothing else in the site may redeclare a semantic alias. */

/* ---- Document-level light. Mirrors [data-surface="light"] in tokens/colors.css. ---- */
[data-theme="light"] {
  --surface-base: var(--ot-chalk);
  --surface-raised: var(--ot-paper);
  --surface-sunken: var(--ot-grey-150);
  --surface-accent: var(--ot-lime);
  --surface-quiet: var(--ot-moss);
  --hairline: var(--ot-grey-200);
  --hairline-strong: #CFD1C6;

  --text-strong: var(--ot-asphalt);
  --text-body: var(--ot-grey-700);
  --text-muted: var(--ot-grey-500);
  --text-placeholder: #A4ACA6;
  --text-accent: var(--ot-lime-ink);
  --text-on-accent: var(--ot-asphalt);

  --action-fill: var(--ot-asphalt);
  --action-fill-hover: #1E2620;
  --action-label: var(--ot-lime);
  --action-ghost-border: var(--ot-asphalt);
  --action-ghost-label: var(--ot-asphalt);
}

/* ---- Section-level dark. Mirrors the `:root` block in tokens/colors.css. ---- */
[data-surface="dark"] {
  --surface-base: var(--ot-asphalt);
  --surface-raised: var(--ot-asphalt-raised);
  --surface-sunken: var(--ot-asphalt);
  --surface-accent: var(--ot-lime);
  --surface-quiet: var(--ot-moss);
  --hairline: var(--ot-grey-900);
  --hairline-strong: #3A423B;

  --text-strong: var(--ot-chalk);
  --text-body: var(--ot-grey-300);
  --text-muted: var(--ot-grey-400);
  --text-placeholder: var(--ot-grey-450);
  --text-accent: var(--ot-lime);
  --text-on-accent: var(--ot-asphalt);

  --action-fill: var(--ot-lime);
  --action-fill-hover: var(--ot-lime-bright);
  --action-label: var(--ot-asphalt);
  --action-ghost-border: #3A423B;
  --action-ghost-label: var(--ot-chalk);
  /* colors.css only declares --focus-ring on :root. A dark section inside a
     light document would otherwise inherit the light ring and go invisible. */
  --focus-ring: var(--ot-lime);
}

/* ==========================================================================
   Accessibility corrections to the brand kit

   These three values are WRONG in tokens/colors.css for light surfaces, and
   are corrected here rather than in the copied token files so the brand kit
   stays re-syncable. THE SAME FIXES SHOULD BE MADE UPSTREAM IN THE BRAND KIT —
   they affect every future Overtake surface, not just this page.

   Measured with the WCAG 2.x contrast formula.
   ========================================================================== */

[data-theme="light"],
[data-surface="light"] {
  /* 1. Focus ring. colors.css sets --focus-ring: var(--ot-lime) on :root only,
        so light surfaces inherited Lime: 1.11:1 on Chalk, 1.25:1 on Paper,
        against the 3:1 a focus indicator needs. The whole aanvraag form sits on
        a light surface, so keyboard users had no visible focus at all.
        Ink Lime is the brand's designated lime-flavoured colour on light and
        measures 4.85:1 on Chalk, 5.47:1 on Paper, 5.21:1 on grey-150. */
  --focus-ring: var(--ot-lime-ink);

  /* 2. Muted text. grey-500 on Chalk is 4.07:1 and on grey-150 4.38:1, under
        the 4.5:1 normal text needs — and it carries the smallest type on the
        page (10-11px mono form labels, stat captions). grey-600 takes it to
        6.93:1 / 7.45:1. Hierarchy against body text survives because these
        labels are also separated by size, weight and mono casing. */
  --text-muted: var(--ot-grey-600);

  /* 3. Placeholder. #A4ACA6 measured 2.28:1 on Paper. grey-500 — freed up by
        the change above — gives 4.59:1 and still sits a step lighter than the
        label above it. */
  --text-placeholder: var(--ot-grey-500);
}

/* ---- Ghost button backdrop ----
   Ghost buttons get a Paper fill on light surfaces so the 1.5px outline has
   something to sit against; on Asphalt they stay transparent.

   Note this holds a *literal* brand colour, not a semantic alias. A custom
   property is computed on the element that declares it, so `--x: var(--surface-raised)`
   set on :root would freeze at the dark value and never flip inside a light
   section. Anything that has to track the surface must call the semantic alias
   at the point of use instead. */
:root { --ghost-bg: transparent; }

[data-theme="light"],
[data-surface="light"] { --ghost-bg: var(--ot-paper); }

[data-surface="dark"] { --ghost-bg: transparent; }