/* =====================================================================================================================
   App kit - design tokens and themes
   ---------------------------------------------------------------------------------------------------------------------
   One palette for every landing app (productivity, science, games, and any category added later). An app opts in with
   class="ak-app" on its .filter-landing-app root; its components (components.css) and canvas drawing (app-kit.js,
   AppKit.colors) then read these tokens instead of a private copy of the palette.

   Where the theme comes from (the same split the existing apps use):
     - the stage (.filter-landing-stage) follows the app's own Light / Dark select: data-theme on the app root, set by
       js/seo/landing-site-theme.js (select[data-app-theme]) or by app-kit.js when the app has no select;
     - the control panel (.filter-landing-controls) follows the site theme: class "dark" on <body>.
   .ak-theme-light / .ak-theme-dark force a theme on any element inside an app (a preview card, an exported canvas host).

   Accent colour: every app has one. It comes from, in order of precedence,
     1. the app's own CSS:      .my-landing-app { --ak-accent-light: #0f766e; --ak-accent-dark: #2dd4bf; }
     2. a named accent:         data-ak-accent="teal"   (blue, indigo, violet, purple, pink, rose, red, orange, amber,
                                                          green, emerald, teal, cyan, sky, slate)
     3. the app's category:     data-ak-category="science"  (see the category list below)
     4. the default:            blue (the colour every productivity app used so far).
   The light value is used on light surfaces with white text on it, the dark value on dark surfaces with dark text on it;
   both pairs pass WCAG AA (4.5:1) for normal text.

   Custom properties that refer to other custom properties resolve where they are declared. That is why the theme rules
   below set --ak-accent from --ak-accent-light / --ak-accent-dark again in every theme scope, and why derived colours
   (soft fills, hover tints) are mixed with color-mix() where they are used rather than declared here.
   ===================================================================================================================== */

/* --- Scale tokens: the same in both themes ------------------------------------------------------------------------- */

.ak-app,
.ak-theme-light,
.ak-theme-dark {
    --ak-radius-sm: 0.45rem;   /* fields, buttons, chips */
    --ak-radius: 0.7rem;       /* stat tiles, list rows */
    --ak-radius-lg: 0.75rem;   /* panels */
    --ak-radius-pill: 999px;

    --ak-space-1: 0.25rem;
    --ak-space-2: 0.5rem;
    --ak-space-3: 0.75rem;
    --ak-space-4: 1rem;
    --ak-space-5: 1.5rem;

    --ak-fs-xs: 0.75rem;
    --ak-fs-sm: 0.85rem;
    --ak-fs-md: 1rem;
    --ak-fs-lg: 1.25rem;
    --ak-fs-xl: 1.55rem;
    --ak-fs-2xl: 2.25rem;

    --ak-font: inherit;
    --ak-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
    /* Canvas text: a canvas cannot inherit the page font. */
    --ak-canvas-font: system-ui, -apple-system, "Segoe UI", "Noto Sans", Roboto, Arial, sans-serif;

    --ak-duration: 160ms;
    --ak-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* The default accent (blue), on the app root only so a nested .ak-theme-* keeps its app's accent. :where() keeps it at
   zero specificity: a category, a named accent and the app's own CSS all override it. */
:where(.ak-app) {
    --ak-accent-light: #2563eb;
    --ak-accent-dark: #60a5fa;
}

/* --- Light theme (the default) ------------------------------------------------------------------------------------- */

.ak-app,
.ak-theme-light,
.ak-app[data-theme="light"] > .filter-landing-stage {
    color-scheme: light;

    --ak-bg: #ffffff;          /* stage background */
    --ak-panel: #f8fafc;       /* panels and tiles on the stage */
    --ak-field: #ffffff;       /* inputs, selects, plain buttons */
    --ak-hover: #eef2f8;       /* hover / selected row */
    --ak-text: #0f172a;
    --ak-muted: #64748b;       /* labels, notes, axis text */
    --ak-border: #d5dbe6;
    --ak-grid: #e2e8f0;        /* chart grid lines, empty bar track */

    --ak-accent: var(--ak-accent-light, #2563eb);
    --ak-on-accent: #ffffff;   /* text and icons on an accent fill */

    --ak-success: #15803d;
    --ak-warning: #b45309;
    --ak-danger: #b91c1c;
    --ak-info: #0369a1;

    /* Chart series: a categorical set that stays apart for most colour-vision types; use them in this order. */
    --ak-series-1: #2563eb;
    --ak-series-2: #ea580c;
    --ak-series-3: #16a34a;
    --ak-series-4: #9333ea;
    --ak-series-5: #db2777;
    --ak-series-6: #0891b2;
    --ak-series-7: #ca8a04;
    --ak-series-8: #64748b;

    --ak-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08);
    --ak-shadow-lg: 0 10px 30px -12px rgb(15 23 42 / 0.25);
}

/* --- Dark theme ---------------------------------------------------------------------------------------------------- */

.ak-theme-dark,
.ak-app[data-theme="dark"] > .filter-landing-stage,
.dark .ak-app > .filter-landing-controls {
    color-scheme: dark;

    --ak-bg: #0f172a;
    --ak-panel: #111c33;
    --ak-field: #0b1220;
    --ak-hover: #1b2a47;
    --ak-text: #e2e8f0;
    --ak-muted: #94a3b8;
    --ak-border: #334155;
    --ak-grid: #23324d;

    --ak-accent: var(--ak-accent-dark, #60a5fa);
    --ak-on-accent: #0f172a;

    --ak-success: #4ade80;
    --ak-warning: #fbbf24;
    --ak-danger: #f87171;
    --ak-info: #38bdf8;

    --ak-series-1: #60a5fa;
    --ak-series-2: #fb923c;
    --ak-series-3: #4ade80;
    --ak-series-4: #c084fc;
    --ak-series-5: #f472b6;
    --ak-series-6: #22d3ee;
    --ak-series-7: #facc15;
    --ak-series-8: #94a3b8;

    --ak-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
    --ak-shadow-lg: 0 10px 30px -12px rgb(0 0 0 / 0.6);
}

/* --- Categories: data-ak-category="..." on the app root. A category is a default accent, so apps of one kind look
       related and different kinds tell apart at a glance. Zero specificity; a named accent (below, later in the file)
       and the app's own CSS win over it. Keep this list in step with AppKitCategories in Landing/AppKit.cs. ------- */

:where([data-ak-category="productivity"]) { --ak-accent-light: #2563eb; --ak-accent-dark: #60a5fa; } /* blue */
:where([data-ak-category="finance"])      { --ak-accent-light: #047857; --ak-accent-dark: #34d399; } /* emerald */
:where([data-ak-category="time"])         { --ak-accent-light: #7c3aed; --ak-accent-dark: #a78bfa; } /* violet */
:where([data-ak-category="math"])         { --ak-accent-light: #4f46e5; --ak-accent-dark: #818cf8; } /* indigo */
:where([data-ak-category="science"])      { --ak-accent-light: #0f766e; --ak-accent-dark: #2dd4bf; } /* teal */
:where([data-ak-category="games"])        { --ak-accent-light: #c2410c; --ak-accent-dark: #fb923c; } /* orange */
:where([data-ak-category="health"])       { --ak-accent-light: #e11d48; --ak-accent-dark: #fb7185; } /* rose */
:where([data-ak-category="education"])    { --ak-accent-light: #b45309; --ak-accent-dark: #fbbf24; } /* amber */
:where([data-ak-category="creative"])     { --ak-accent-light: #db2777; --ak-accent-dark: #f472b6; } /* pink */
:where([data-ak-category="utility"])      { --ak-accent-light: #0e7490; --ak-accent-dark: #22d3ee; } /* cyan */

/* --- Named accents: data-ak-accent="..." on the app root (or any element inside it). Zero specificity, but after the
       categories, so a named accent beats the category; the app's own CSS beats both. ------------------------------ */

:where([data-ak-accent="blue"])    { --ak-accent-light: #2563eb; --ak-accent-dark: #60a5fa; }
:where([data-ak-accent="indigo"])  { --ak-accent-light: #4f46e5; --ak-accent-dark: #818cf8; }
:where([data-ak-accent="violet"])  { --ak-accent-light: #7c3aed; --ak-accent-dark: #a78bfa; }
:where([data-ak-accent="purple"])  { --ak-accent-light: #9333ea; --ak-accent-dark: #c084fc; }
:where([data-ak-accent="pink"])    { --ak-accent-light: #db2777; --ak-accent-dark: #f472b6; }
:where([data-ak-accent="rose"])    { --ak-accent-light: #e11d48; --ak-accent-dark: #fb7185; }
:where([data-ak-accent="red"])     { --ak-accent-light: #dc2626; --ak-accent-dark: #f87171; }
:where([data-ak-accent="orange"])  { --ak-accent-light: #c2410c; --ak-accent-dark: #fb923c; }
:where([data-ak-accent="amber"])   { --ak-accent-light: #b45309; --ak-accent-dark: #fbbf24; }
:where([data-ak-accent="green"])   { --ak-accent-light: #15803d; --ak-accent-dark: #4ade80; }
:where([data-ak-accent="emerald"]) { --ak-accent-light: #047857; --ak-accent-dark: #34d399; }
:where([data-ak-accent="teal"])    { --ak-accent-light: #0f766e; --ak-accent-dark: #2dd4bf; }
:where([data-ak-accent="cyan"])    { --ak-accent-light: #0e7490; --ak-accent-dark: #22d3ee; }
:where([data-ak-accent="sky"])     { --ak-accent-light: #0369a1; --ak-accent-dark: #38bdf8; }
:where([data-ak-accent="slate"])   { --ak-accent-light: #475569; --ak-accent-dark: #94a3b8; }

/* A named accent on an element inside the app (a tile, a button group): --ak-accent was resolved on the app root, so it
   is resolved again here, in the theme of the scope the element sits in. */
.ak-app [data-ak-accent] {
    --ak-accent: var(--ak-accent-light, #2563eb);
    --ak-on-accent: #ffffff;
}

.ak-theme-dark [data-ak-accent],
.ak-app[data-theme="dark"] > .filter-landing-stage [data-ak-accent],
.dark .ak-app > .filter-landing-controls [data-ak-accent] {
    --ak-accent: var(--ak-accent-dark, #60a5fa);
    --ak-on-accent: #0f172a;
}