/* GridKit Themes – M3 Color System
 *
 * How this file is built:
 *   1. Literal blocks per theme — the fallback for browsers without oklch().
 *   2. One @supports block at the end that derives every theme from a SINGLE
 *      hue angle. There a theme is exactly one line.
 *
 * Why: the literals below were hand-picked from an external palette. Measured
 * in OKLCH their lightness scatters from 0.45 to 0.69 and their chroma from
 * 0.04 to 0.21 — which is why Amber looks lighter than Slate and Rose louder
 * than Forest. The derivation pins the lightness and varies only the angle; the
 * chroma runs against the sRGB boundary, which oklch() handles by itself.
 *
 * error and warning are deliberately NOT in the theme blocks: semantic colors
 * must not follow the accent.
 */

/* === THEME: Indigo (Default) === */
[data-gk-theme="indigo"] {
    --gk-sidebar-bg: #eef2ff;
}

/* === THEME: Ocean (Blue-Teal) === */
[data-gk-theme="ocean"] {
    --gk-sidebar-bg: #f0f9ff;
    --gk-primary: #0ea5e9;
    --gk-on-primary: #fff;
    --gk-primary-container: #e0f2fe;
    --gk-on-primary-container: #0c4a6e;
    --gk-secondary: #64748b;
    --gk-on-secondary: #ffffff;   /* white carries on this grey: 4.76–4.83:1 */
    --gk-tertiary: #14b8a6;
}

/* === THEME: Forest (Green) === */
[data-gk-theme="forest"] {
    --gk-sidebar-bg: #f0fdf4;
    --gk-primary: #059669;
    --gk-on-primary: #fff;
    --gk-primary-container: #d1fae5;
    --gk-on-primary-container: #064e3b;
    --gk-secondary: #6b7280;
    --gk-on-secondary: #ffffff;   /* white carries on this grey: 4.76–4.83:1 */
    --gk-tertiary: #8b5cf6;
}

/* === THEME: Rose (Pink-Purple) === */
[data-gk-theme="rose"] {
    --gk-sidebar-bg: #fdf2f8;
    --gk-primary: #ec4899;
    --gk-on-primary: #fff;
    --gk-primary-container: #fce7f3;
    --gk-on-primary-container: #831843;
    --gk-secondary: #78716c;
    --gk-on-secondary: #ffffff;   /* white carries on this grey: 4.76–4.83:1 */
    --gk-tertiary: #a855f7;
}

/* === THEME: Amber (Warm) === */
[data-gk-theme="amber"] {
    --gk-sidebar-bg: #fffbeb;
    --gk-primary: #d97706;
    --gk-on-primary: #fff;
    --gk-primary-container: #fef3c7;
    --gk-on-primary-container: #78350f;
    --gk-secondary: #78716c;
    --gk-on-secondary: #ffffff;   /* white carries on this grey: 4.76–4.83:1 */
    --gk-tertiary: #0ea5e9;
}

/* === THEME: Slate (Neutral/Minimal) === */
[data-gk-theme="slate"] {
    --gk-sidebar-bg: #f8fafc;
    --gk-primary: #475569;
    --gk-on-primary: #fff;
    --gk-primary-container: #e2e8f0;
    --gk-on-primary-container: #1e293b;
    --gk-secondary: #64748b;
    --gk-on-secondary: #ffffff;   /* white carries on this grey: 4.76–4.83:1 */
    --gk-tertiary: #6366f1;
}

/* === Dark variants per theme === */
/* Sidebar: darker than the content (#1e293b) → lower elevation, M3-compliant */
/* Accent: light version of the theme color that glows on a dark background    */

[data-gk-theme="indigo"][data-gk-mode="dark"] {
    --gk-sidebar-bg: #0d1225;
    --gk-sidebar-accent: #a5b4fc;
}
[data-gk-theme="ocean"][data-gk-mode="dark"] {
    --gk-primary: #38bdf8;
    --gk-on-primary: #0c4a6e;
    --gk-primary-container: #075985;
    --gk-on-primary-container: #e0f2fe;
    --gk-tertiary: #5eead4;
    --gk-sidebar-bg: #071a2d;
    --gk-sidebar-accent: #38bdf8;
}
[data-gk-theme="forest"][data-gk-mode="dark"] {
    --gk-primary: #34d399;
    --gk-on-primary: #064e3b;
    --gk-primary-container: #065f46;
    --gk-on-primary-container: #d1fae5;
    --gk-tertiary: #a78bfa;
    --gk-sidebar-bg: #071a12;
    --gk-sidebar-accent: #34d399;
}
[data-gk-theme="rose"][data-gk-mode="dark"] {
    --gk-primary: #f9a8d4;
    --gk-on-primary: #831843;
    --gk-primary-container: #9d174d;
    --gk-on-primary-container: #fce7f3;
    --gk-tertiary: #c084fc;
    --gk-sidebar-bg: #1a0818;
    --gk-sidebar-accent: #f9a8d4;
}
[data-gk-theme="amber"][data-gk-mode="dark"] {
    --gk-primary: #fbbf24;
    --gk-on-primary: #78350f;
    --gk-primary-container: #92400e;
    --gk-on-primary-container: #fef3c7;
    --gk-tertiary: #38bdf8;
    --gk-sidebar-bg: #1a0d06;
    --gk-sidebar-accent: #fbbf24;
}
[data-gk-theme="slate"][data-gk-mode="dark"] {
    --gk-primary: #94a3b8;
    --gk-on-primary: #1e293b;
    --gk-primary-container: #334155;
    --gk-on-primary-container: #e2e8f0;
    --gk-tertiary: #a5b4fc;
    --gk-sidebar-bg: #0d1424;
    --gk-sidebar-accent: #7dd3fc;
}

/* === Global Dark Mode — Surface & Text Colors === */
[data-gk-mode="dark"] {
    --gk-surface-dim:               #0f172a;
    --gk-surface:                   #1e293b;
    --gk-surface-bright:            #293548;
    --gk-surface-container-lowest:  #0a1120;
    --gk-surface-container-low:     #172033;
    --gk-surface-container:         #1e293b;
    --gk-surface-container-high:    #243044;
    --gk-surface-container-highest: #2d3a52;
    --gk-on-surface:                #e2e8f0;
    --gk-on-surface-variant:        #94a3b8;
    --gk-outline:                   #475569;
    --gk-outline-variant:           rgba(255,255,255,0.08);
}


/* ===================================================================
   DERIVATION — a theme is a hue angle
   Overrides the literals above as soon as the browser can do oklch().
   =================================================================== */
@supports (color: oklch(0.6 0.15 277)) {
  /* The angle per theme. A theme needs nothing more. */
  [data-gk-theme="indigo"] { --gk-theme-hue: 277; }
  [data-gk-theme="ocean"]  { --gk-theme-hue: 237; }
  [data-gk-theme="forest"] { --gk-theme-hue: 163; }
  [data-gk-theme="rose"]   { --gk-theme-hue: 354; }
  [data-gk-theme="amber"]  { --gk-theme-hue:  58; }
  /* Slate is the deliberate exception: same lightness, low chroma — the
     neutral theme is meant to stay neutral. */
  [data-gk-theme="slate"]  { --gk-theme-hue: 257; --gk-theme-chroma: 0.04; }

  [data-gk-theme] {
    /* Via fallbacks instead of via assignments: the theme blocks above have the
       same specificity as this block, so a direct assignment would override
       them depending on the order.
       The fallback angle is vital: without it the whole primary color collapses
       as soon as data-gk-theme is empty or unknown — no theme block matches,
       --gk-hue is missing, oklch() turns invalid and buttons end up standing
       there with no background. That is exactly what happens when gridkit.js
       writes an empty data-gk-theme at startup. */
    --gk-hue: var(--gk-theme-hue, 277);
    --gk-chroma: var(--gk-theme-chroma, 0.15);
    /* The one number that decides whether white text carries on every accent.
       0.60 ran from 2.77:1 (ocean, a real violation) to 7.58:1 (slate).
       0.55 pulled that to 4.35–5.27 — better, but forest still sat under the
       4.5:1 that AA asks of body text, and "4.3:1" was documented as the floor.
       0.53 clears it on all six with room to spare: forest 4.69, ocean 4.98,
       slate 5.28, amber 5.52, indigo 5.51, rose 5.73. Measured, not estimated. */
    --gk-l-primary: 0.53;

    --gk-primary:              oklch(var(--gk-l-primary) var(--gk-chroma) var(--gk-hue));
    --gk-on-primary:           #ffffff;
    --gk-primary-container:    oklch(0.95 calc(var(--gk-chroma) * 0.28) var(--gk-hue));
    --gk-on-primary-container: oklch(0.36 calc(var(--gk-chroma) * 0.75) var(--gk-hue));

    /* Tertiary is the accent role — one third further around the color wheel. */
    --gk-tertiary:              oklch(var(--gk-l-primary) var(--gk-chroma) calc(var(--gk-hue) + 120));
    --gk-on-tertiary:           #ffffff;
    --gk-tertiary-container:    oklch(0.95 calc(var(--gk-chroma) * 0.28) calc(var(--gk-hue) + 120));
    --gk-on-tertiary-container: oklch(0.36 calc(var(--gk-chroma) * 0.75) calc(var(--gk-hue) + 120));

    --gk-sidebar-bg:     oklch(0.975 calc(var(--gk-chroma) * 0.16) var(--gk-hue));
    --gk-sidebar-accent: var(--gk-primary);
  }

  /* Dark mode: the same math, mirrored lightness values. */
  [data-gk-theme][data-gk-mode="dark"],
  [data-gk-theme].gk-dark {
    --gk-primary:              oklch(0.80 calc(var(--gk-chroma) * 0.80) var(--gk-hue));
    --gk-on-primary:           oklch(0.28 calc(var(--gk-chroma) * 0.70) var(--gk-hue));
    --gk-primary-container:    oklch(0.38 calc(var(--gk-chroma) * 0.60) var(--gk-hue));
    --gk-on-primary-container: oklch(0.92 calc(var(--gk-chroma) * 0.20) var(--gk-hue));

    --gk-tertiary:              oklch(0.80 calc(var(--gk-chroma) * 0.80) calc(var(--gk-hue) + 120));
    --gk-on-tertiary:           oklch(0.28 calc(var(--gk-chroma) * 0.70) calc(var(--gk-hue) + 120));
    --gk-tertiary-container:    oklch(0.38 calc(var(--gk-chroma) * 0.60) calc(var(--gk-hue) + 120));
    --gk-on-tertiary-container: oklch(0.92 calc(var(--gk-chroma) * 0.20) calc(var(--gk-hue) + 120));

    --gk-sidebar-bg:     oklch(0.19 calc(var(--gk-chroma) * 0.35) var(--gk-hue));
    --gk-sidebar-accent: oklch(0.80 calc(var(--gk-chroma) * 0.80) var(--gk-hue));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DENSITY — how tightly a table is set
   ═══════════════════════════════════════════════════════════════════════════

   Independent of colour: set data-gk-density on <body> alongside any theme and
   any mode. Nothing here names a colour, so light and dark both keep working.

   Why it is a variant and not the default: a tighter table fits more rows on a
   screen, which is what someone who lives in the tool all day wants — and it
   is exactly wrong for someone who opens one page a week. That is a decision
   per installation, not one to make for everybody.
   ─────────────────────────────────────────────────────────────────────────── */

/* Konsole — for people who work in the tool all day.
   Tighter rows, quieter status marks. Roughly a third more rows on the same
   screen. */
[data-gk-density="konsole"] {
    --gk-table-pad-y: 8px;
    --gk-table-pad-x: 12px;
    /* Pills are for one-word states in prose. In a column of them, a small
       radius reads as a data field and stops competing with the text. */
    --gk-label-radius: 4px;
}

/* Weit — the other direction, for pages that are read rather than worked:
   dashboards on a wall, a page a customer sees once. */
[data-gk-density="weit"] {
    --gk-table-pad-y: 16px;
    --gk-table-pad-x: 20px;
}