/*
 * vCloud Vision design tokens — "Altitude / Clear Sky"
 * Source of truth for the Neve child theme. Load before all other theme CSS.
 *
 * Theme switching:
 *   - Dark is the DEFAULT for every first-time visitor (decision: "always dark first").
 *   - <html data-theme="light"> switches to light. The toggle writes the choice to
 *     localStorage('vcv-theme') and an inline script in <head> applies it before paint.
 *   - prefers-color-scheme is intentionally NOT used for the default (see HANDOFF.md §9).
 *
 * Contrast ratios (WCAG 2.x) are noted as  /* d / l *\/  = dark / light.
 * Verify them in the built site with an accessibility checker before launch.
 */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* ---------- Surfaces & borders ---------- */
  --vcv-color-bg: #0A1424;
  --vcv-color-surface: #101E33;
  --vcv-color-surface-raised: #16273F;
  --vcv-color-surface-hover: #16273F;
  --vcv-color-border: #22324B;              /* decorative */
  --vcv-color-border-strong: #5B7194;       /* 3.7:1 — inputs, secondary buttons */
  --vcv-color-figure-border: #3A4E6E;       /* outline for light-UI screenshots */

  /* ---------- Text ---------- */
  --vcv-color-text: #E8EEF7;                /* 15.8 */
  --vcv-color-text-soft: #C5D2E3;           /* excerpts, secondary paragraphs */
  --vcv-color-text-muted: #9DB0C8;          /* 8.3 on bg, 6.8 on raised */
  --vcv-color-text-disabled: #6B7F9C;       /* disabled controls only */

  /* ---------- Accent & interaction ---------- */
  --vcv-color-accent: #7CC4FF;              /* 9.8 */
  --vcv-color-accent-hover: #A3D6FF;        /* 12.0 */
  --vcv-color-accent-active: #5AB1F5;       /* 7.9 */
  --vcv-color-on-accent: #071021;           /* 10.1 / 12.3 / 8.2 on the three accent states */
  --vcv-color-accent-soft: #16294A;         /* accent text on it: 7.7 */
  --vcv-color-link: #7CC4FF;
  --vcv-color-link-hover: #A3D6FF;
  --vcv-color-secondary: #C3B5FF;           /* topic labels; 9.1 on surface */
  --vcv-color-focus: #C3B5FF;               /* 10.0 */
  --vcv-color-selection: #2B4A75;           /* text on it 7.7 */
  --vcv-color-mark: #4A3A12;                /* search highlight; text on it 9.5 */
  --vcv-color-zebra: #0D192B;               /* table striping */

  /* ---------- Code ---------- */
  --vcv-color-code-bg: #060E1A;             /* text 15.3 */
  --vcv-color-code-header-bg: #0B1626;      /* label 8.2 */
  --vcv-color-code-border: #22324B;
  --vcv-color-code-text: #DCE6F2;
  --vcv-color-code-label: #9DB0C8;
  --vcv-color-code-button-border: #3A4E6E;
  --vcv-color-inline-code-bg: #16294A;      /* text 12.4 */

  /* ---------- Syntax (identical in both modes, sits on code-bg) ---------- */
  --vcv-syntax-text: #DCE6F2;
  --vcv-syntax-keyword: #7CC4FF;            /* cmdlets, SQL keywords, XML tags, JSON keys — 10.3 / 9.7 */
  --vcv-syntax-param: #C3B5FF;              /* parameters, operators, XML attributes — 10.5 / 9.8 */
  --vcv-syntax-string: #8EE6B8;             /* 13.0 / 12.2 */
  --vcv-syntax-variable: #FFD27A;           /* variables, booleans, null — 13.6 / 12.8 */
  --vcv-syntax-number: #FFB38A;             /* 11.1 / 10.4 */
  --vcv-syntax-comment: #7F93AD;            /* italic — 6.2 / 5.8 */
  --vcv-syntax-error: #FF9AA8;              /* error, deleted, log ERROR — 9.6 / 9.0 */
  --vcv-syntax-punctuation: #9DB0C8;        /* 8.7 / 8.2 */

  /* ---------- Feedback / callouts (fg · bg · border) ---------- */
  --vcv-color-info: #7CC4FF;     --vcv-color-info-bg: #0F2440;     --vcv-color-info-border: #1F4A75;     /* 8.3 */
  --vcv-color-warning: #FFD27A;  --vcv-color-warning-bg: #2A2112;  --vcv-color-warning-border: #5C4520;  /* 11.1 */
  --vcv-color-danger: #FF9AA8;   --vcv-color-danger-bg: #2C1420;   --vcv-color-danger-border: #64283A;   /* 8.5 */
  --vcv-color-success: #8EE6B8;  --vcv-color-success-bg: #0F2A22;  --vcv-color-success-border: #2E6B4F;  /* 10.3 */
  --vcv-color-tip: #C3B5FF;      --vcv-color-tip-bg: #1C1A3A;      --vcv-color-tip-border: #3F3A7A;      /* 9.0 */

  /* ---------- Elevation ---------- */
  --vcv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --vcv-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
  --vcv-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.50);
  --vcv-backdrop: rgba(4, 9, 18, 0.92);     /* lightbox / menu overlay */
}

[data-theme="light"] {
  color-scheme: light;

  --vcv-color-bg: #F4F8FC;
  --vcv-color-surface: #FFFFFF;
  --vcv-color-surface-raised: #FFFFFF;      /* + --vcv-shadow-md */
  --vcv-color-surface-hover: #EEF3F9;
  --vcv-color-border: #D3DEEA;
  --vcv-color-border-strong: #7A8BA1;       /* 3.3 */
  --vcv-color-figure-border: #D3DEEA;

  --vcv-color-text: #0E1A2B;                /* 16.4 */
  --vcv-color-text-soft: #2C3B50;
  --vcv-color-text-muted: #4A5B72;          /* 6.5 on bg, 6.9 on surface */
  --vcv-color-text-disabled: #8494A8;

  --vcv-color-accent: #0B63B3;              /* 5.7 */
  --vcv-color-accent-hover: #084F90;        /* 7.8 */
  --vcv-color-accent-active: #063F73;       /* 10.0 */
  --vcv-color-on-accent: #FFFFFF;           /* 6.1 / 8.3 / 10.7 */
  --vcv-color-accent-soft: #E3EEFA;         /* accent text on it: 5.2 */
  --vcv-color-link: #0B63B3;
  --vcv-color-link-hover: #084F90;
  --vcv-color-secondary: #5B3FC4;           /* 7.1 on surface, 6.7 on bg */
  --vcv-color-focus: #6D4FD6;               /* 5.3 */
  --vcv-color-selection: #CFE3F8;           /* text on it 13.3 */
  --vcv-color-mark: #FFE7A8;                /* 14.4 */
  --vcv-color-zebra: #F8FAFD;

  --vcv-color-code-bg: #0B1626;             /* code stays dark in light mode — 14.4 */
  --vcv-color-code-header-bg: #13223A;      /* label 7.2 */
  --vcv-color-code-border: #0B1626;
  --vcv-color-inline-code-bg: #E6EEF7;      /* text 14.9 */

  --vcv-color-info: #0B5CA8;     --vcv-color-info-bg: #EAF3FD;     --vcv-color-info-border: #B9D6F3;     /* 6.0 */
  --vcv-color-warning: #8A5300;  --vcv-color-warning-bg: #FFF6E5;  --vcv-color-warning-border: #F2D49B;  /* 5.9 */
  --vcv-color-danger: #B4233A;   --vcv-color-danger-bg: #FDEEF0;   --vcv-color-danger-border: #F2BFC7;   /* 5.8 */
  --vcv-color-success: #1E7A4F;  --vcv-color-success-bg: #EAF8F1;  --vcv-color-success-border: #B5E3CB;  /* 4.9 */
  --vcv-color-tip: #5B3FC4;      --vcv-color-tip-bg: #F2EFFE;      --vcv-color-tip-border: #D3C9F8;      /* 6.3 */

  --vcv-shadow-sm: 0 1px 2px rgba(14, 26, 43, 0.08);
  --vcv-shadow-md: 0 1px 2px rgba(14, 26, 43, 0.08), 0 6px 16px rgba(14, 26, 43, 0.10);
  --vcv-shadow-lg: 0 16px 40px rgba(14, 26, 43, 0.16);
  --vcv-backdrop: rgba(14, 26, 43, 0.85);
}

/* ---------- Mode-independent tokens ---------- */
:root {
  /* Code-block controls do not flip with the theme, for the same reason the
     syntax colours above do not: the code block stays dark in light mode
     (HANDOFF §5.12), so a control sitting on it must stay dark too. Using
     --vcv-color-surface-raised here put white on white in light mode. */
  --vcv-color-code-button-bg: #0B1626;
  --vcv-color-code-button-text: #DCE6F2;         /* 15.0 on the button bg */
  --vcv-color-code-button-hover-bg: #16273F;
  --vcv-color-code-button-hover-text: #FFFFFF;   /* 12.4 on the hover bg */

  /* Families (self-hosted, see HANDOFF.md §10) */
  --vcv-font-heading: "Manrope", "Segoe UI", system-ui, sans-serif;
  --vcv-font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --vcv-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Fluid type scale — interpolates 375px → 1440px viewports (1rem = 16px) */
  --vcv-text-display: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);       /* 36 → 60 */
  --vcv-text-h1: clamp(2rem, 1.6rem + 1.8vw, 3rem);                  /* 32 → 48 */
  --vcv-text-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);                /* 24 → 32 */
  --vcv-text-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);           /* 20 → 24 */
  --vcv-text-h4: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);         /* 18 → 20 */
  --vcv-text-body: clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem);     /* 17 → 18 */
  --vcv-text-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);     /* 14 → 15 */
  --vcv-text-label: 0.75rem;                                         /* 12, 700, uppercase, 0.06em */
  --vcv-text-code: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);     /* 14 → 15 */
  --vcv-text-code-inline: 0.9em;

  --vcv-leading-display: 1.05;
  --vcv-leading-h1: 1.12;
  --vcv-leading-h2: 1.2;
  --vcv-leading-h3: 1.25;
  --vcv-leading-h4: 1.3;
  --vcv-leading-body: 1.65;
  --vcv-leading-small: 1.5;
  --vcv-leading-code: 1.6;

  --vcv-tracking-display: -0.03em;
  --vcv-tracking-h1: -0.025em;
  --vcv-tracking-h2: -0.02em;
  --vcv-tracking-h3: -0.015em;
  --vcv-tracking-h4: -0.01em;
  --vcv-tracking-label: 0.06em;

  --vcv-weight-regular: 400;
  --vcv-weight-bold: 700;
  --vcv-weight-heading: 800;   /* display, h1, h2; h3/h4 use 700 */

  /* Spacing — 4px base */
  --vcv-space-1: 0.25rem;  /* 4  */
  --vcv-space-2: 0.5rem;   /* 8  */
  --vcv-space-3: 0.75rem;  /* 12 */
  --vcv-space-4: 1rem;     /* 16 */
  --vcv-space-5: 1.5rem;   /* 24 */
  --vcv-space-6: 2rem;     /* 32 */
  --vcv-space-7: 3rem;     /* 48 */
  --vcv-space-8: 4rem;     /* 64 */
  --vcv-space-9: 6rem;     /* 96 */
  --vcv-space-section: clamp(3rem, 2rem + 4vw, 6rem);
  --vcv-gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);    /* page side padding 16 → 32 */

  /* Post rhythm */
  --vcv-flow: 1.25em;            /* paragraph → paragraph */
  --vcv-flow-h2: 2.5em;          /* space above h2 */
  --vcv-flow-h3: 1.75em;         /* space above h3/h4 */
  --vcv-flow-block: 1.75em;      /* code, figure, callout, table: margin-block */

  /* Radii */
  --vcv-radius-xs: 4px;     /* inline code, kbd */
  --vcv-radius-sm: 8px;     /* chips, tags, small buttons, TOC items */
  --vcv-radius-md: 10px;    /* buttons, inputs, code blocks, callouts */
  --vcv-radius-lg: 12px;    /* cards, figures, tables */
  --vcv-radius-xl: 16px;    /* featured card, cookie banner, 404 panel */
  --vcv-radius-full: 999px; /* avatars, nav pills, version chips */

  /* Layout */
  --vcv-width-content: 720px;     /* reading column; paragraphs also capped at 70ch */
  --vcv-width-wide: 1100px;       /* alignwide: screenshots, tables */
  --vcv-width-container: 1280px;  /* header, footer, archive grids */
  --vcv-width-toc: 220px;
  --vcv-measure: 70ch;
  --vcv-header-height: 72px;      /* 60px below 1280 */

  /* Breakpoints (reference — CSS custom properties can't be used in @media):
     mobile 375 (base) · tablet ≥768 · desktop ≥1280 · wide ≥1440 */

  /* Motion & layering */
  --vcv-duration: 150ms;
  --vcv-ease: cubic-bezier(0.2, 0, 0, 1);
  --vcv-z-toc: 50;
  --vcv-z-header: 100;
  --vcv-z-cookie: 900;
  --vcv-z-lightbox: 1000;

  /* Focus ring (apply via :focus-visible) */
  --vcv-focus-ring: 2px solid var(--vcv-color-focus);
  --vcv-focus-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --vcv-duration: 0ms; }
  html { scroll-behavior: auto !important; }
}

/* ---------- Bridge: Neve global colours → vCloud Vision tokens ----------
 * Neve (free) exposes its Customizer palette as --nv-* custom properties.
 * Pointing them at our tokens makes Neve's own components follow the theme switch.
 *
 * DEVIATION FROM THE HANDOFF, and it matters: the selectors below are prefixed with
 * `html` on purpose. Neve emits its own `:root{--nv-*}` block, and in the Customizer
 * preview it does so from wp_head at priority 10 — after wp_print_styles (priority 8)
 * has already printed our stylesheet (neve/inc/core/dynamic_css.php:31-35, :111-118).
 * A plain `:root` here ties Neve's specificity (0,1,0) and loses on source order, so
 * every --nv-* silently fell back to Neve's defaults: post-title links rendered in
 * #272626 via `.entry-title a { color: var(--nv-text-color) }` in both themes.
 * `html:root` is (0,1,1), which wins regardless of order.
 *
 * If this file is ever re-copied from the handoff package, re-apply the html prefix.
 */
html:root,
html[data-theme="dark"],
html[data-theme="light"] {
  --nv-primary-accent: var(--vcv-color-accent);
  --nv-secondary-accent: var(--vcv-color-accent-hover);
  --nv-site-bg: var(--vcv-color-bg);
  --nv-light-bg: var(--vcv-color-surface);
  --nv-dark-bg: var(--vcv-color-code-bg);
  --nv-text-color: var(--vcv-color-text);
  --nv-text-dark-bg: var(--vcv-color-text);
}

/* ---------- Bridge: WordPress preset colours flip with the theme ----------
 * theme.json registers the palette with dark values; these overrides make every
 * block that uses a preset colour (has-*-color / has-*-background-color) follow light mode.
 */
html:root,
html[data-theme="dark"],
html[data-theme="light"] {
  --wp--preset--color--bg: var(--vcv-color-bg);
  --wp--preset--color--surface: var(--vcv-color-surface);
  --wp--preset--color--surface-raised: var(--vcv-color-surface-raised);
  --wp--preset--color--border: var(--vcv-color-border);
  --wp--preset--color--text: var(--vcv-color-text);
  --wp--preset--color--text-muted: var(--vcv-color-text-muted);
  --wp--preset--color--accent: var(--vcv-color-accent);
  --wp--preset--color--on-accent: var(--vcv-color-on-accent);
  --wp--preset--color--secondary: var(--vcv-color-secondary);
  --wp--preset--color--info: var(--vcv-color-info);
  --wp--preset--color--warning: var(--vcv-color-warning);
  --wp--preset--color--danger: var(--vcv-color-danger);
  --wp--preset--color--success: var(--vcv-color-success);
  --wp--preset--color--tip: var(--vcv-color-tip);
  --wp--preset--color--code-bg: var(--vcv-color-code-bg);
}