/* ============================================================================
   KIBO v2 — THEME (single source of truth)
   All colours/shadows/radii/layout/type steps come from here. No literals in
   components. Every variable is declared TWICE — once at :root for light, once
   for dark — which is the reason they exist: a literal written in a component
   cannot follow the theme.
   See Kibo-Docs/2026_v2/regole_sviluppo_ui.md §1.

   Called "theme", not "design tokens" (renamed 2026-08-18). The industry term is
   design tokens, but in Kibo "token" already means two other things that matter
   more — the LLM's tokens (MaxContextTokens, TokenCounter, the credit count) and
   authentication tokens (user_oauth_tokens, token_version, the JWT). One word
   over three unrelated concepts, in a codebase where the other two are the ones
   that break production.

   Product colour convention:
     --human  = user / primary action / brand (green)
     --agent  = AI / proposed-generated objects (purple, often dashed)
     --focus  = focus-time / approvals / "done"
     --alert  = errors / conflicts / urgencies
     --amber  = milestone / soft warning
   ============================================================================ */

:root {
    /* Tells the browser which palette its OWN widgets belong to. Without it every native control —
       checkbox, radio, range, select, date picker, scrollbar, and any <button> that sets no
       background — keeps painting itself for a light page: white squares on a dark app. It is the
       one declaration the theme cannot express through variables, because the UA stylesheet does
       not read them. */
    color-scheme: light;

    /* ── Surfaces / text / lines ─────────────────────────────────────────── */
    --paper:      #F5F6FA;
    --card:       #FFFFFF;
    --field:      #FFFFFF;
    --we:         #FAFBFD;
    --ink:        #2A2F42;
    --ink-soft:   #6E7589;
    --line:       #E4E7F0;
    --shadow:     0 4px 14px rgba(42, 47, 66, .07);
    /* The lifted one: dialogs and floating panels, not cards. Its own value per theme rather than
       an alias of --shadow, because it is a different shadow and not the same one scaled. The light
       value is the literal the two call sites carried inline (KBW-0218), so nothing moves here; the
       dark one is stronger, which is the whole reason for making it a token. */
    --shadow-lg:  0 10px 40px rgba(0, 0, 0, .3);
    --scrim:      rgba(42, 47, 66, .38);

    /* ── Human (user / brand / primary) ─────────────────────────────────── */
    --human:      #2F6B4F;
    --human-soft: #E3EFE8;
    --human-text: #244435;
    --brand-deep: #244435;

    /* ── Agent (AI) ────────────────────────────────────────────────────────── */
    --agent:      #A98FE3;
    --agent-soft: #F2EDFB;
    --agent-text: #6F50B5;
    --agent-deep: #7E6AB8;   /* agent borders / deep tone */

    /* ── Focus ─────────────────────────────────────────────────────────────── */
    --focus:      #5AA6B8;
    --focus-soft: #E4F1F4;
    --focus-text: #2C7180;

    /* ── Alert ─────────────────────────────────────────────────────────────── */
    --alert:      #E08E85;
    --alert-soft: #FAEBE9;
    --alert-text: #B05348;

    /* ── Amber ─────────────────────────────────────────────────────────────── */
    --amber:      #D8A968;
    --amber-soft: #F8F0E3;
    --amber-text: #96672A;

    /* ── Memory-map node types ───────────────────────────────────────────── */
    --m-chat:     #7AA3E0;
    --m-doc:      #8FB3E0;
    --m-frag:     #AFB9CC;
    --m-email:    #E0A3B4;
    --m-event:    #7FC6B2;
    --m-contact:  #DDA3D4;
    --m-act:      #B49DE0;
    --m-note:     #DECF8E;

    /* ── Chat bubbles ────────────────────────────────────────────────────────── */
    --bubble:      #FFFFFF;
    --bubble-line: #E4E7F0;

    /* ── Shell layout ──────────────────────────────────────────────────────── */
    --rail:  62px;
    --panel: 248px;
    /* Height of the app header. Lives here, not inside one panel, because every edge tab hangs from
       it: while it was a private variable of the right dock, the left tab could not see it and the
       two could not agree on where their box started (KBW-0271). */
    --header-h: 52px;
    /* Height of the phone bottom bar, safe area included. Here for the same reason as --header-h:
       the edge tabs stop above it, and the page reserves it — three places that must agree on one
       number (KBW-0271). Inert above the phone breakpoint, where the bar is not shown. */
    --bottombar-h: calc(56px + env(safe-area-inset-bottom));

    /* ── Typography ────────────────────────────────────────────────────────── */
    --font-ui:    'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-head:  'Bricolage Grotesque', var(--font-ui);
    --font-mono:  'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Size scale. Until it existed this file forbade literals in components while
       offering nothing to write instead, so every component invented its own rem
       value: 18 distinct sizes between .68 and .92 for what are five intentions,
       the same size spelled two ways, and nobody comparing them. Pick the step by
       the ROLE of the text, not by the pixels you want. */
    --fs-2xs: .72rem;   /* badges, chips, counters */
    --fs-xs:  .75rem;   /* controls inside a dense row (grid buttons) */
    --fs-sm:  .78rem;   /* the line under a title: email, dates, hints */
    --fs-md:  .85rem;   /* dense body: tables, settings panels, modals */
    --fs-lg:  .9rem;    /* the line that heads a block, and list titles */
    --fs-xl:  1.05rem;  /* small heading inside a card */
    --fs-2xl: 1.6rem;   /* wizard step title */
    --fs-3xl: 2.5rem;   /* display */

    /* ── Code block (own colours, theme-independent) ───────────────────────── */
    --pre-bg: #1E293B;
    --pre-fg: #E2E8F0;

    /* ── Whiteboard card colours (KBW-0122) ─────────────────────────────────
       Ten fixed sticky-note colours, NUMBERED and not named: a token called --pin-green becomes a
       lie the day the green is retuned, and with ten of them that day comes. The number is what is
       stored in the database, so the palette can be changed here without touching a single row.
       Not user-customisable — a free colour breaks its contrast with the text, which is fixed. */
    --pin-color-1:  #FFF3B0;   /* butter  */
    --pin-color-2:  #FFD9C0;   /* peach   */
    --pin-color-3:  #FFC9CE;   /* blush   */
    --pin-color-4:  #F0CBEC;   /* orchid  */
    --pin-color-5:  #D8CDF5;   /* lilac   */
    --pin-color-6:  #C6D8F7;   /* sky     */
    --pin-color-7:  #BFE9E4;   /* mint    */
    --pin-color-8:  #CCE9C4;   /* sage    */
    --pin-color-9:  #E6E1D2;   /* sand    */
    --pin-color-10: #DCE0E8;   /* slate   */
    /* One ink for every card in the theme: the colour decides the paper, never the writing, which is
       what lets ten backgrounds stay legible without ten contrast decisions. */
    --pin-ink:      #2A2F42;
    --pin-line:     rgba(42, 47, 66, .16);
}

[data-theme="dark"] {
    color-scheme: dark;

    --paper:      #14161E;
    --card:       #1C1F2A;
    --field:      #242838;
    --we:         #202330;
    --ink:        #E6E9F3;
    --ink-soft:   #99A0B5;
    --line:       #2C3040;
    --shadow:     0 4px 16px rgba(0, 0, 0, .32);
    --shadow-lg:  0 10px 40px rgba(0, 0, 0, .55);
    --scrim:      rgba(0, 0, 0, .5);

    --human:      #5CB088;
    --human-soft: #1B3429;
    --human-text: #8FDCB2;
    --brand-deep: #244435;

    --agent:      #B49AEC;
    --agent-soft: #2E2845;
    --agent-text: #CDB8FF;
    --agent-deep: #8A74C0;

    --focus:      #5FB3C7;
    --focus-soft: #173138;
    --focus-text: #8FD4E2;

    --alert:      #E59A91;
    --alert-soft: #3C2826;
    --alert-text: #F3B2A9;

    --amber:      #DCB077;
    --amber-soft: #383022;
    --amber-text: #EBC893;

    --m-chat:     #6E9AD8;
    --m-doc:      #86ABDB;
    --m-frag:     #7E8AA3;
    --m-email:    #D898AB;
    --m-event:    #74BFAA;
    --m-contact:  #D69BCC;
    --m-act:      #AB93DC;
    --m-note:     #D4C586;

    --bubble:      #2A2F3E;
    --bubble-line: #3A4052;

    --pre-bg: #0F172A;
    --pre-fg: #E2E8F0;

    /* Whiteboard cards, dark. The same ten colours in their own tone rather than the light ones
       dimmed: pastels on a dark ground either glow or turn to mud, so each is desaturated and
       darkened until it reads as the same colour at the same weight. The ink flips with them —
       colour 1 is still "the yellow one", it is just no longer a lamp. */
    --pin-color-1:  #6A5F2B;
    --pin-color-2:  #6E4B36;
    --pin-color-3:  #6E3F45;
    --pin-color-4:  #5F3A5C;
    --pin-color-5:  #4A3F6B;
    --pin-color-6:  #35496E;
    --pin-color-7:  #2C5A57;
    --pin-color-8:  #3B5A34;
    --pin-color-9:  #55503F;
    --pin-color-10: #414652;
    --pin-ink:      #EDEFF6;
    --pin-line:     rgba(255, 255, 255, .14);
}

/* ============================================================================
   MIGRATION ALIASES — v1 token names now point at v2 tokens.
   Lets the old app.css recolour without rewriting every rule.
   Remove once every page uses the v2 tokens directly.
   ============================================================================ */
:root, [data-theme="dark"] {
    --bg-page:         var(--paper);
    --bg-surface:      var(--card);
    --bg-surface-2:    var(--we);
    --bg-surface-3:    var(--paper);
    /* The surface under the pointer. Missing from this list until 2026-08-18, so the three rules
       citing it were invalid and dropped — .k-grid rows and the org switcher had no hover at all
       (KBW-0218). --paper is what the rest of the kit already uses for hover, 14 times over. */
    --bg-hover:        var(--paper);
    --text-primary:    var(--ink);
    --text-secondary:  var(--ink-soft);
    --text-muted:      var(--ink-soft);
    --border:          var(--line);
    --border-input:    var(--line);
    --accent:          var(--human);
    --accent-hover:    var(--brand-deep);
    --accent-disabled: var(--human-soft);
    --bubble-user-bg:  var(--human);
    --bubble-user-fg:  #ffffff;
    --bubble-bot-bg:   var(--bubble);
    --bubble-bot-fg:   var(--ink);
    --code-bg:         var(--paper);
    --shadow-sm:       var(--shadow);
    --shadow-md:       var(--shadow);
    --shadow-card:     var(--shadow);
}