/* Generated by scripts/site-build.mjs from src/app/theme.js (Eclipse) and src/app/app-styles.js. Never edit. */
:root {
  --bg: #0B0D10;
  --card: #15181D;
  --primary: #5E6AD2;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --accent: #818CF8;
  --text-primary: #F5F7FA;
  --text-muted: #8B95A7;
  --border: #FFFFFF10;
  --on-primary: #FFFFFF;

/* §1.2 derived color */
    --primary-soft:   color-mix(in srgb, var(--primary) 14%, transparent);
    --primary-border: color-mix(in srgb, var(--primary) 30%, transparent);
    --primary-glow:   color-mix(in srgb, var(--primary) 45%, transparent);
    --success-soft:   color-mix(in srgb, var(--success) 14%, transparent);
    --success-border: color-mix(in srgb, var(--success) 30%, transparent);
    --success-glow:   color-mix(in srgb, var(--success) 45%, transparent);
    --accent-soft:   color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-border: color-mix(in srgb, var(--accent) 30%, transparent);
    --accent-glow:   color-mix(in srgb, var(--accent) 45%, transparent);
    --warning-soft:   color-mix(in srgb, var(--warning) 14%, transparent);
    --warning-border: color-mix(in srgb, var(--warning) 30%, transparent);
    --warning-glow:   color-mix(in srgb, var(--warning) 45%, transparent);
    --danger-soft:   color-mix(in srgb, var(--danger) 14%, transparent);
    --danger-border: color-mix(in srgb, var(--danger) 30%, transparent);
    --danger-glow:   color-mix(in srgb, var(--danger) 45%, transparent);

    /* derived ROLES — each does exactly one job. Derived, never authored per theme:
       a role is authored only when no derivation stays legible on all 10 themes.
       --text-faint mixes toward --bg, never transparent (opacity over near-black
       and over warm off-white are not the same colour) — and --text-disabled, the
       fourth and last step, mixes the same way for the same reason: the foreground
       of a control that exists but cannot be used (an inert grip, a caption on a
       form). Below muted, below faint, still visible on the two light themes. */
    --text-heading: var(--text-primary);
    --text-data:    var(--text-primary);
    --text-faint:   color-mix(in srgb, var(--text-muted) 78%, var(--bg));
    --text-disabled: color-mix(in srgb, var(--text-muted) 50%, var(--bg));
    --info:         var(--primary);
    --info-soft:    color-mix(in srgb, var(--info) 14%, transparent);

    /* entity colour SLOTS — notes · habits · kanban columns · calendar events.
       A surface stores the slot NAME; what it resolves to is built above from the
       ONE registry (src/data/color-slots.js), so the hue is a palette hex and an
       entity holds its colour when the theme changes (DESIGN_SPEC -> Colour). */

    --surface-1:    var(--card);
    --surface-2:    color-mix(in srgb, var(--card) 88%, var(--text-primary) 12%);
    --surface-glass: color-mix(in srgb, var(--card) 72%, transparent);
    --hairline:     color-mix(in srgb, var(--border) 70%, transparent);
    --hover-bg:     color-mix(in srgb, var(--text-primary) 5%, transparent);
    --input-bg:     color-mix(in srgb, var(--bg) 80%, var(--card) 20%);
    /* the card edge pair — a resting edge and its hover — mixed from the ink into
       the card, so both hold on all ten themes (the wizard, the state screens) */
    --edge-subtle:  color-mix(in srgb, var(--text-primary) 10%, var(--card));
    --edge-hover:   color-mix(in srgb, var(--text-primary) 22%, var(--card));

  --font-prose: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-data:  'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}