/* Atomi design system: tokens (ATOM-30). The only place for colours, fonts, radii and shadows.
   Exar design system (themes/exar v1.3.0): logo navy carries the surface, warm clay is the single highlight,
   Bricolage Grotesque for headings, Hanken Grotesk for everything else. Values: approved mockup v0.2.

   Themes: light by default, dark follows the OS (prefers-color-scheme). <html data-theme="light|dark"> forces one.
   The forced dark block repeats the media query block 1:1 (no build step); atomi/tests/test_design_tokens.py
   fails if they drift apart.

   Stages: one colour per client stage, `--st-<key>` with the keys of atomi.lifecycle.SZAKASZ_KULCS.
   Components read `--st`; set it with the class `st-<key>` (e.g. <span class="chip st-building">). */

/* ---------- fonts (self-hosted, SIL OFL 1.1, latin + latin-ext for ő/ű) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 700; font-stretch: 100%; font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 700; font-stretch: 100%; font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Ignis Academy lockup only (login brand side): Space Grotesk 700, latin is enough for the name */
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- light (default) ---------- */
:root {
  /* palette: same in both themes */
  --navy-950: oklch(0.17 0.045 256);
  --navy-900: oklch(0.20 0.05 256);
  --navy-800: oklch(0.26 0.07 256);
  --navy-700: oklch(0.32 0.09 256);
  --navy-300: oklch(0.72 0.07 256);
  --navy-100: oklch(0.94 0.025 256);
  --clay-600: oklch(0.62 0.13 50);
  --clay-500: oklch(0.71 0.135 56);
  --clay-100: oklch(0.95 0.03 66);
  --on-navy: oklch(0.97 0.01 250);
  --on-navy-muted: oklch(0.82 0.035 256);
  --logo-on-dark: #FFFFFF;
  --logo-on-light: var(--navy-700);
  /* login brand side illustration (always on navy, so the same in both themes) */
  --art-green: oklch(0.48 0.11 155);
  --art-green-2: oklch(0.62 0.12 155);
  --art-green-3: oklch(0.80 0.12 155);
  --art-band: oklch(0.80 0.10 155 / 0.16);
  --art-band-line: oklch(0.80 0.10 155 / 0.45);
  --art-amber: oklch(0.60 0.12 85);
  --art-blue: oklch(0.40 0.10 256);

  /* type, shape, layout */
  --font-display: 'Bricolage Grotesque', Georgia, serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --r: 14px;
  --r-sm: 9px;
  --wrap: 1280px;
  --label-w: 300px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-pop: 0 2px 6px oklch(0.15 0.01 256 / 0.08), 0 20px 48px oklch(0.15 0.01 256 / 0.2);

  /* surfaces and text */
  --bg: oklch(0.985 0.004 250);
  --bg-2: oklch(0.955 0.008 250);
  --surface: #FFFFFF;
  --ink: oklch(0.24 0.03 256);
  --ink-2: oklch(0.38 0.03 256);
  --ink-3: oklch(0.49 0.03 256);
  --line: oklch(0.90 0.008 250);
  --line-soft: oklch(0.945 0.006 250);
  --hover: oklch(0.975 0.008 250);
  --accent: var(--navy-700);
  --accent-soft: var(--navy-100);
  --highlight: var(--clay-600);
  --highlight-soft: var(--clay-100);
  --good: oklch(0.45 0.10 155);
  --good-soft: oklch(0.95 0.035 155);
  --scrim: oklch(0.20 0.05 256 / 0.42);
  --shadow: 0 1px 2px oklch(0.20 0.05 256 / 0.06), 0 10px 28px oklch(0.20 0.05 256 / 0.07);
  --shadow-lg: -18px 0 48px oklch(0.20 0.05 256 / 0.22);

  /* client stages (atomi.lifecycle.SZAKASZ_KULCS) */
  --st-idea: oklch(0.66 0.01 256);
  --st-defined: oklch(0.60 0.07 256);
  --st-offer: oklch(0.55 0.10 280);
  --st-ordered: oklch(0.40 0.10 256);
  --st-building: oklch(0.60 0.12 85);
  --st-pilot: oklch(0.58 0.12 120);
  --st-accept: oklch(0.64 0.13 50);
  --st-warranty: oklch(0.50 0.10 155);
  --st-closed: oklch(0.55 0.03 200);
  --st-paused: oklch(0.62 0.04 85);
  --st-dropped: oklch(0.58 0.07 25);

  /* value, fee, warranty */
  --value: oklch(0.48 0.11 155);
  --value-soft: oklch(0.95 0.04 155);
  --fee: var(--navy-700);
  --support: oklch(0.955 0.035 155);
  --support-ended: oklch(0.968 0.012 155);
  --support-line: oklch(0.80 0.06 155);
  --support-ink: oklch(0.45 0.08 155);

  /* KPI groups */
  --k-planned: var(--st-offer);
  --k-contracted: var(--navy-700);
  --k-finished: var(--st-warranty);
  --k-paid: var(--clay-600);

  --st: var(--st-idea);
  color-scheme: light;
}

/* ---------- dark: OS setting ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.17 0.03 256);
    --bg-2: oklch(0.21 0.035 256);
    --surface: oklch(0.215 0.035 256);
    --ink: oklch(0.95 0.01 250);
    --ink-2: oklch(0.84 0.03 256);
    --ink-3: oklch(0.72 0.03 256);
    --line: oklch(0.32 0.04 256);
    --line-soft: oklch(0.27 0.04 256);
    --hover: oklch(0.25 0.04 256);
    --accent: var(--navy-300);
    --accent-soft: oklch(0.29 0.06 256);
    --highlight: var(--clay-500);
    --highlight-soft: oklch(0.30 0.05 56);
    --good: oklch(0.78 0.12 155);
    --good-soft: oklch(0.27 0.05 155);
    --scrim: oklch(0.08 0.02 256 / 0.6);
    --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 10px 28px oklch(0 0 0 / 0.25);
    --shadow-lg: -18px 0 48px oklch(0 0 0 / 0.45);
    --shadow-pop: 0 2px 6px oklch(0 0 0 / 0.3), 0 20px 48px oklch(0 0 0 / 0.45);
    --st-idea: oklch(0.70 0.01 256);
    --st-defined: oklch(0.72 0.07 256);
    --st-offer: oklch(0.72 0.10 280);
    --st-ordered: oklch(0.78 0.07 256);
    --st-building: oklch(0.80 0.11 85);
    --st-pilot: oklch(0.80 0.11 125);
    --st-accept: oklch(0.75 0.13 56);
    --st-warranty: oklch(0.76 0.11 155);
    --st-closed: oklch(0.72 0.03 200);
    --st-paused: oklch(0.74 0.04 85);
    --st-dropped: oklch(0.70 0.08 25);
    --value: oklch(0.80 0.12 155);
    --value-soft: oklch(0.30 0.05 155);
    --fee: var(--navy-300);
    --support: oklch(0.29 0.045 155);
    --support-ended: oklch(0.25 0.02 155);
    --support-line: oklch(0.50 0.06 155);
    --support-ink: oklch(0.82 0.08 155);
    --k-contracted: var(--navy-300);
    --k-paid: var(--clay-500);
    color-scheme: dark;
  }
}

/* ---------- dark: forced (data-theme="dark"), same values as above ---------- */
:root[data-theme="dark"] {
  --bg: oklch(0.17 0.03 256);
  --bg-2: oklch(0.21 0.035 256);
  --surface: oklch(0.215 0.035 256);
  --ink: oklch(0.95 0.01 250);
  --ink-2: oklch(0.84 0.03 256);
  --ink-3: oklch(0.72 0.03 256);
  --line: oklch(0.32 0.04 256);
  --line-soft: oklch(0.27 0.04 256);
  --hover: oklch(0.25 0.04 256);
  --accent: var(--navy-300);
  --accent-soft: oklch(0.29 0.06 256);
  --highlight: var(--clay-500);
  --highlight-soft: oklch(0.30 0.05 56);
  --good: oklch(0.78 0.12 155);
  --good-soft: oklch(0.27 0.05 155);
  --scrim: oklch(0.08 0.02 256 / 0.6);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 10px 28px oklch(0 0 0 / 0.25);
  --shadow-lg: -18px 0 48px oklch(0 0 0 / 0.45);
  --shadow-pop: 0 2px 6px oklch(0 0 0 / 0.3), 0 20px 48px oklch(0 0 0 / 0.45);
  --st-idea: oklch(0.70 0.01 256);
  --st-defined: oklch(0.72 0.07 256);
  --st-offer: oklch(0.72 0.10 280);
  --st-ordered: oklch(0.78 0.07 256);
  --st-building: oklch(0.80 0.11 85);
  --st-pilot: oklch(0.80 0.11 125);
  --st-accept: oklch(0.75 0.13 56);
  --st-warranty: oklch(0.76 0.11 155);
  --st-closed: oklch(0.72 0.03 200);
  --st-paused: oklch(0.74 0.04 85);
  --st-dropped: oklch(0.70 0.08 25);
  --value: oklch(0.80 0.12 155);
  --value-soft: oklch(0.30 0.05 155);
  --fee: var(--navy-300);
  --support: oklch(0.29 0.045 155);
  --support-ended: oklch(0.25 0.02 155);
  --support-line: oklch(0.50 0.06 155);
  --support-ink: oklch(0.82 0.08 155);
  --k-contracted: var(--navy-300);
  --k-paid: var(--clay-500);
  color-scheme: dark;
}

/* ---------- stage classes: set --st for chips, bars, lifecycle steps ---------- */
.st-idea { --st: var(--st-idea); }
.st-defined { --st: var(--st-defined); }
.st-offer { --st: var(--st-offer); }
.st-ordered { --st: var(--st-ordered); }
.st-building { --st: var(--st-building); }
.st-pilot { --st: var(--st-pilot); }
.st-accept { --st: var(--st-accept); }
.st-warranty { --st: var(--st-warranty); }
.st-closed { --st: var(--st-closed); }
.st-paused { --st: var(--st-paused); }
.st-dropped { --st: var(--st-dropped); }