/*
  Destination: C:\Lensari\Lensari\claude-hq\drafts\gallery-site-v1\shared\tokens.css
  Purpose: the Lensari gallery design tokens (DESIGN-CONSTITUTION.md section 1).
           Every page links this file FIRST, before site.css and any page CSS.
  Ownership: FOUNDATION OWNER ONLY. Page builders link, never edit.
  Theme model: dark is the DEFAULT; light applies via prefers-color-scheme,
  and html[data-theme="dark"|"light"] overrides both (theme.js persists it).
*/

/* ------------------------------------------------ core tokens (dark default) */

:root {
  --ls-base:    #0A0E12;
  --ls-surface: #1A2530;
  --ls-text:    #EDF2F7;
  --ls-label:   #8FA3B0;
  --ls-accent:  #0CF0DD;
  --ls-brand:   #3DAA8C;
  --ls-divider: #1A2530;
  --ls-danger:  #FF7A7A;
  --ls-success: #57D9A3;

  /* derived (token-level only; component CSS must use these, never raw hex) */
  --ls-glow:          color-mix(in srgb, var(--ls-accent) 14%, transparent);
  --ls-accent-dim:    color-mix(in srgb, var(--ls-accent) 55%, var(--ls-label));
  --ls-surface-raise: color-mix(in srgb, var(--ls-surface) 72%, var(--ls-base));
  --ls-line:          color-mix(in srgb, var(--ls-surface) 60%, var(--ls-base));
  --ls-on-accent:     var(--ls-base);
  --ls-trace-opacity: 0.55;
  --ls-shot-shadow:   rgba(0, 0, 0, 0.55);

  /* type + rhythm */
  --font-display: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-body: "Inter", system-ui, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --measure: 62ch;
  --content: 1120px;

  color-scheme: dark;
}

/* ------------------------------------------------ light via system preference */

@media (prefers-color-scheme: light) {
  :root {
    --ls-base:    #F0F4F3;
    --ls-surface: #CDD6D2;
    --ls-text:    #1A2228;
    --ls-label:   #2A363C;
    --ls-accent:  #1A7A6A;
    --ls-brand:   #1D6B5C;
    --ls-divider: #E0E6E3;
    --ls-danger:  #B3261E;
    --ls-success: #1D7A4C;

    --ls-glow: color-mix(in srgb, var(--ls-accent) 10%, transparent);
    --ls-surface-raise: color-mix(in srgb, var(--ls-surface) 38%, var(--ls-base));
    --ls-line: color-mix(in srgb, var(--ls-surface) 75%, var(--ls-base));
    --ls-on-accent: #F0F4F3;
    --ls-trace-opacity: 0.4;
    --ls-shot-shadow: rgba(26, 34, 40, 0.22);
    color-scheme: light;
  }
}

/* ------------------------------------------------ explicit overrides (theme.js) */

html[data-theme="dark"] {
  --ls-base:    #0A0E12;
  --ls-surface: #1A2530;
  --ls-text:    #EDF2F7;
  --ls-label:   #8FA3B0;
  --ls-accent:  #0CF0DD;
  --ls-brand:   #3DAA8C;
  --ls-divider: #1A2530;
  --ls-danger:  #FF7A7A;
  --ls-success: #57D9A3;

  --ls-glow: color-mix(in srgb, var(--ls-accent) 14%, transparent);
  --ls-surface-raise: color-mix(in srgb, var(--ls-surface) 72%, var(--ls-base));
  --ls-line: color-mix(in srgb, var(--ls-surface) 60%, var(--ls-base));
  --ls-on-accent: var(--ls-base);
  --ls-trace-opacity: 0.55;
  --ls-shot-shadow: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

html[data-theme="light"] {
  --ls-base:    #F0F4F3;
  --ls-surface: #CDD6D2;
  --ls-text:    #1A2228;
  --ls-label:   #2A363C;
  --ls-accent:  #1A7A6A;
  --ls-brand:   #1D6B5C;
  --ls-divider: #E0E6E3;
  --ls-danger:  #B3261E;
  --ls-success: #1D7A4C;

  --ls-glow: color-mix(in srgb, var(--ls-accent) 10%, transparent);
  --ls-surface-raise: color-mix(in srgb, var(--ls-surface) 38%, var(--ls-base));
  --ls-line: color-mix(in srgb, var(--ls-surface) 75%, var(--ls-base));
  --ls-on-accent: #F0F4F3;
  --ls-trace-opacity: 0.4;
  --ls-shot-shadow: rgba(26, 34, 40, 0.22);
  color-scheme: light;
}