/* ════════════════════════════════════════════════════════════
   LS3 design tokens — Light and Dark themes.
   Shared by the public site, the visual editor's canvas and the editor UI.
   Loaded before main.css / editor.css.

   How it works
   • The theme is chosen on <html data-theme="light|dark"> (set before first
     paint by the small script in the page <head>; see assets/js/theme.js).
   • Components only use the semantic tokens below (--color-*), or the short
     legacy aliases (--ink, --line, --green, --teal …) that point at them, so
     one component system serves both themes.
   • The --ls3-color-* brand values are the defaults from src/brand.js and can
     be overridden site-wide in Global Site Elements → Brand Colors.
   ════════════════════════════════════════════════════════════ */

:root {
  /* Brand (theme-independent) */
  --ls3-color-accent: #9FC981;      /* LS3 Light Green */
  --ls3-color-ink: #10242D;         /* Dark navy text (light theme) */
  --ls3-color-background: #F6F8F6;  /* Light background */
  --ls3-color-dark: #121C26;        /* Dark theme background (navy/charcoal) */
  --ls3-color-white: #FFFFFF;
  --color-on-green: #10242D;        /* text on green buttons/badges — both themes */
}

/* ── Light theme (default) ──────────────────────────────────── */
:root,
[data-theme="light"] {
  color-scheme: light;
  --color-page-bg: var(--ls3-color-background);                       /* alternate sections, hero */
  --color-section-bg: var(--ls3-color-white);                         /* main sections */
  --color-surface: var(--ls3-color-white);                            /* cards, panels, menus */
  --color-surface-subtle: color-mix(in srgb, var(--ls3-color-background), var(--ls3-color-accent) 7%);
  --color-header-bg: var(--ls3-color-white);
  --color-topbar-bg: var(--color-surface-subtle);
  --color-topbar-text: #536675;
  --color-text-primary: var(--ls3-color-ink);
  --color-text-body: color-mix(in srgb, var(--ls3-color-ink) 82%, #6A7F8F);
  --color-text-secondary: #536675;
  --color-text-faint: #7F8F9A;
  --color-border: #E1E9E3;
  --color-border-strong: #C9D5CD;
  --color-brand-green: var(--ls3-color-accent);
  --color-brand-green-hover: color-mix(in oklab, var(--ls3-color-accent) 88%, #2D4A1C);
  --color-brand-green-active: color-mix(in oklab, var(--ls3-color-accent) 78%, #2D4A1C);
  --color-brand-green-soft: color-mix(in srgb, var(--ls3-color-accent) 22%, #fff);
  --color-brand-green-softer: color-mix(in srgb, var(--ls3-color-accent) 11%, #fff);
  --color-accent-ink: color-mix(in oklab, var(--ls3-color-accent) 62%, #000);  /* green text/icons on light surfaces (AA) */
  --color-accent-ink-hover: color-mix(in oklab, var(--color-accent-ink) 80%, #000);
  --color-heading-accent: color-mix(in oklab, var(--ls3-color-accent) 60%, #1F4A10);  /* "operators." in headlines */
  --color-hero-glow: color-mix(in srgb, var(--ls3-color-accent) 30%, transparent);
  --color-hero-bg: color-mix(in srgb, var(--ls3-color-background) 45%, #fff);
  --color-strip-bg: color-mix(in srgb, var(--ls3-color-background), var(--ls3-color-accent) 4%);
  /* Capabilities strip: separate light cards */
  --cap-gap: 12px; --cap-item-bg: var(--color-surface); --cap-item-border: var(--color-border); --cap-divider: transparent; --cap-icon: var(--color-text-primary);
  --brand-word: var(--color-heading-accent); --brand-word-light: var(--color-heading-accent);
  --color-band: var(--ls3-color-ink);                                 /* dark feature bands (navy, never teal) */
  --color-band-raised: color-mix(in srgb, var(--ls3-color-ink) 88%, #fff);
  --color-footer-bg: color-mix(in srgb, var(--ls3-color-ink) 92%, #000);
  --color-field-bg: var(--ls3-color-background);
  --color-btn2-bg: var(--ls3-color-white);
  --color-btn2-border: #C3CEC6;
  --color-btn2-hover-bg: var(--ls3-color-background);
  --color-focus: var(--ls3-color-ink);
  --color-focus-ring: color-mix(in srgb, var(--ls3-color-accent) 45%, transparent);
  --color-danger: #A33A2B;
  --color-danger-bg: #FDF0EE;
  --color-danger-border: #F2D2CC;
  --shadow-sm: 0 1px 2px rgba(16, 36, 45, .06);
  --shadow: 0 1px 2px rgba(16, 36, 45, .05), 0 8px 24px rgba(16, 36, 45, .06);
  --shadow-lg: 0 18px 48px rgba(16, 36, 45, .12);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310242D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Dark theme (navy/charcoal with lime-green accents) ─────── */
[data-theme="dark"] {
  color-scheme: dark;
  --color-page-bg: var(--ls3-color-dark);
  --color-section-bg: color-mix(in srgb, var(--ls3-color-dark), #2A4258 5%);
  --color-surface: color-mix(in srgb, var(--ls3-color-dark), #2A4258 22%);
  --color-surface-subtle: color-mix(in srgb, var(--ls3-color-dark), #2A4258 38%);
  --color-header-bg: var(--ls3-color-dark);
  --color-topbar-bg: color-mix(in srgb, var(--ls3-color-dark) 75%, #000);
  --color-topbar-text: #AABACB;
  --color-text-primary: #F4F7FB;
  --color-text-body: #C9D4DF;
  --color-text-secondary: #AABACB;
  --color-text-faint: #7E90A2;
  --color-border: color-mix(in srgb, var(--ls3-color-dark), #5A738C 32%);
  --color-border-strong: color-mix(in srgb, var(--ls3-color-dark), #5A738C 48%);
  --color-brand-green: var(--ls3-color-accent);
  --color-brand-green-hover: color-mix(in srgb, var(--ls3-color-accent) 78%, #fff);
  --color-brand-green-active: color-mix(in srgb, var(--ls3-color-accent) 88%, #000);
  --color-brand-green-soft: color-mix(in srgb, var(--ls3-color-dark), var(--ls3-color-accent) 16%);
  --color-brand-green-softer: color-mix(in srgb, var(--ls3-color-dark), var(--ls3-color-accent) 9%);
  --color-accent-ink: var(--ls3-color-accent);
  --color-accent-ink-hover: color-mix(in srgb, var(--ls3-color-accent) 78%, #fff);
  --color-heading-accent: var(--ls3-color-accent);
  --color-hero-glow: color-mix(in srgb, #3A5670 30%, transparent);
  --color-hero-bg: var(--ls3-color-dark);
  --color-strip-bg: var(--ls3-color-dark);
  /* Capabilities strip: one band with dividers */
  --cap-gap: 0px; --cap-item-bg: transparent; --cap-item-border: transparent; --cap-divider: var(--color-border); --cap-icon: var(--ls3-color-accent);
  --brand-word: var(--color-text-primary); --brand-word-light: var(--ls3-color-accent);
  --color-band: var(--color-surface-subtle);
  --color-band-raised: color-mix(in srgb, var(--ls3-color-dark), #5A738C 26%);
  --color-footer-bg: color-mix(in srgb, var(--ls3-color-dark) 72%, #000);
  --color-field-bg: color-mix(in srgb, var(--ls3-color-dark) 86%, #000);
  --color-btn2-bg: transparent;
  --color-btn2-border: color-mix(in srgb, var(--ls3-color-dark), #8EA3B8 45%);
  --color-btn2-hover-bg: rgba(255, 255, 255, .05);
  --color-focus: var(--ls3-color-accent);
  --color-focus-ring: color-mix(in srgb, var(--ls3-color-accent) 35%, transparent);
  --color-danger: #F2A093;
  --color-danger-bg: #3A2224;
  --color-danger-border: #5C3236;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .4);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AABACB' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Green text keeps the accent's hue where the browser supports relative colours */
@supports (color: oklch(from red l c h)) {
    :root:not([data-theme="dark"]), [data-theme="light"] { --color-accent-ink: oklch(from var(--ls3-color-accent) calc(l - 0.28) c h); }
}

/* ── Short aliases used throughout the component CSS and the editor presets ──
   (names kept from earlier versions so saved page styles keep working;
   "teal" now means the brand accent ink — dark green in Light, lime in Dark).
   Re-declared on every [data-theme] element so a section can preview the other theme. */
:root, [data-theme] {
  --teal: var(--color-accent-ink);
  --teal-700: var(--color-accent-ink-hover);
  --teal-800: var(--color-accent-ink-hover);
  --teal-900: var(--color-on-green);
  --teal-100: var(--color-brand-green-soft);
  --teal-50: var(--color-brand-green-softer);
  --green: var(--color-brand-green);
  --green-300: var(--color-brand-green-hover);
  --green-600: var(--color-brand-green-active);
  --green-ink: var(--color-accent-ink);
  --green-100: var(--color-brand-green-soft);
  --green-50: var(--color-brand-green-softer);
  --cream: var(--color-page-bg);
  --white: var(--color-surface);
  --band: var(--color-band);
  --ink: var(--color-text-primary);
  --ink-2: var(--color-text-body);
  --ink-3: var(--color-text-secondary);
  --ink-4: var(--color-text-faint);
  --line: var(--color-border);
  --line-2: var(--color-border-strong);
  --danger: var(--color-danger);
  --danger-50: var(--color-danger-bg);
  --danger-100: var(--color-danger-border);
  --focus-ring: var(--color-focus-ring);

  /* Site-wide colour roles (Global Site Elements → Brand Colors) */
  --ls3-text: var(--color-text-body);
  --ls3-page-bg: var(--color-section-bg);
  --ls3-link: var(--color-accent-ink);
  --ls3-link-hover: var(--color-accent-ink-hover);
  --ls3-btn-primary-bg: var(--color-brand-green);
  --ls3-btn-primary-bg-hover: var(--color-brand-green-hover);
  --ls3-btn-primary-bg-active: var(--color-brand-green-active);
  --ls3-btn-primary-text: var(--color-on-green);
}