/* ============================================================================
   KIBO v2 — DESIGN TOKENS (single source of truth)
   All colours/shadows/radii/layout come from here. No literals in components.
   See Kibo-Docs/2026_v2/regole_sviluppo_ui.md §1.
   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 {
    /* ── 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);
    --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;

    /* ── 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;

    /* ── 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"] {
    --paper:      #14161E;
    --card:       #1C1F2A;
    --field:      #242838;
    --we:         #202330;
    --ink:        #E6E9F3;
    --ink-soft:   #99A0B5;
    --line:       #2C3040;
    --shadow:     0 4px 16px rgba(0, 0, 0, .32);
    --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);
    --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);
}