/* ------------------------------------------------------------------
   Talkalytics brand palette (Talkalytics Colours V 0.2).
   These 12 values are the only colour literals allowed in the CSS;
   every other shade is derived from them with color-mix().
   ------------------------------------------------------------------ */
:root {
    --brand-forest:     #172F13;
    --brand-moss:       #628A4E;
    --brand-mint:       #A9D6C7;
    --brand-cream:      #F1EAC5;
    --brand-ochre:      #E0A53F;
    --brand-white:      #F9FCFC;
    --brand-blush:      #E4B4A6;
    --brand-terracotta: #C06E56;
    --brand-burgundy:   #800020;
    --brand-teal-light: #5EB2BD;
    --brand-teal:       #17727E;
    --brand-teal-deep:  #1A3B3F;
}

:root {
    --sab: env(safe-area-inset-bottom, 0px);

    /* --- layout --- */
    --header-height:           68px;
    --sidebar-left-width:      248px;
    --sidebar-right-width:     560px;
    --sidebar-collapsed-width: 64px;

    /* --- typography ---
       display: names, labels, badges, navigation, buttons. Andale Mono ships with macOS only;
       other systems fall back to their own monospace.
       body: running text (definitions, inputs, prose). */
    --font-display: "Andale Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-2xs:     10.5px;
    --text-xs:      12px;
    --text-sm:      13px;
    --text-base:    14px;
    --text-md:      15px;
    --text-lg:      16px;
    --text-xl:      20px;
    --text-xxl:     24px;
    --text-xxxl:    32px;
    --leading:      1.5;
    --tracking-label: 0.12em;

    /* --- radius --- */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   10px;
    --r-lg:   12px;
    --r-full: 9999px;

    /* --- transitions --- */
    --t-fast:    0.15s ease;
    --t-med:     0.25s ease;
    --t-sidebar: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- light theme (default) --- */
    --c-bg:               color-mix(in srgb, var(--brand-cream) 14%, var(--brand-white));
    --c-surface:          var(--brand-white);
    --c-surface-sunk:     color-mix(in srgb, var(--brand-cream) 35%, var(--brand-white));
    --c-surface-hover:    color-mix(in srgb, var(--brand-cream) 45%, var(--brand-white));
    --c-surface-selected: color-mix(in srgb, var(--brand-burgundy) 7%, var(--brand-white));
    --c-border:           color-mix(in srgb, var(--brand-forest) 12%, transparent);
    --c-border-strong:    color-mix(in srgb, var(--brand-forest) 24%, transparent);

    --c-text:       var(--brand-forest);
    --c-text-muted: color-mix(in srgb, var(--brand-forest) 68%, var(--brand-white));
    --c-link:       var(--brand-teal);

    --c-accent:       var(--brand-burgundy);
    --c-accent-hover: color-mix(in srgb, var(--brand-burgundy) 85%, black);
    --c-on-accent:    var(--brand-white);
    --c-focus:        color-mix(in srgb, var(--brand-burgundy) 35%, transparent);

    --c-danger:  var(--brand-burgundy);
    --c-success: color-mix(in srgb, var(--brand-moss) 70%, var(--brand-forest));
    --c-warning: color-mix(in srgb, var(--brand-ochre) 45%, var(--brand-forest));

    --c-nav-active-bg: var(--brand-forest);
    --c-nav-active-fg: var(--brand-cream);

    /* header is forest in both themes */
    --c-header:        var(--brand-forest);
    --c-header-fg:     var(--brand-cream);
    --c-header-border: color-mix(in srgb, var(--brand-cream) 22%, transparent);
    --c-header-hover:  color-mix(in srgb, var(--brand-cream) 10%, transparent);

    /* diagonal wedge background on body */
    --pattern-tint: color-mix(in srgb, var(--brand-forest) 6%, transparent);

    /* logo sits on a cream tile in both themes */
    --logo-bg: var(--brand-cream);

    --shadow-sm: 0 1px 2px color-mix(in srgb, var(--brand-forest) 8%, transparent);
    --shadow-md: 0 6px 24px -8px color-mix(in srgb, var(--brand-forest) 18%, transparent);
    --shadow-lg: 0 12px 40px -12px color-mix(in srgb, var(--brand-forest) 28%, transparent);

    /* --- entity label badges --- */
    --label-concept-bg:     color-mix(in srgb, var(--brand-burgundy) 10%, transparent);
    --label-concept-color:  var(--brand-burgundy);
    --label-dataset-bg:     color-mix(in srgb, var(--brand-teal) 12%, transparent);
    --label-dataset-color:  var(--brand-teal);
    --label-metric-bg:      color-mix(in srgb, var(--brand-ochre) 22%, transparent);
    --label-metric-color:   color-mix(in srgb, var(--brand-ochre) 45%, var(--brand-forest));
    --label-relation-bg:    color-mix(in srgb, var(--brand-moss) 14%, transparent);
    --label-relation-color: color-mix(in srgb, var(--brand-moss) 70%, var(--brand-forest));

    /* --- status pills (Draft / InReview / Validated) --- */
    --status-draft:      var(--c-text-muted);
    --status-review:     var(--c-warning);
    --status-review-dot: var(--brand-ochre);
    --status-valid:      var(--c-success);
    --status-valid-dot:  var(--brand-moss);

    --avatar-bg: var(--brand-mint);
    --avatar-fg: var(--brand-forest);
}

/* data-theme is always set on <html> by the inline script in index.html / login.html
   (stored choice, else prefers-color-scheme), so only the dark overrides live here. */
[data-theme="dark"] {
    color-scheme: dark;

    --c-bg:               var(--brand-forest);
    --c-surface:          color-mix(in srgb, var(--brand-white) 5%, var(--brand-forest));
    --c-surface-sunk:     color-mix(in srgb, black 18%, var(--brand-forest));
    --c-surface-hover:    color-mix(in srgb, var(--brand-white) 9%, var(--brand-forest));
    --c-surface-selected: color-mix(in srgb, var(--brand-ochre) 12%, var(--brand-forest));
    --c-border:           color-mix(in srgb, var(--brand-cream) 12%, transparent);
    --c-border-strong:    color-mix(in srgb, var(--brand-cream) 24%, transparent);

    --c-text:       var(--brand-white);
    --c-text-muted: color-mix(in srgb, var(--brand-white) 66%, var(--brand-forest));
    --c-link:       var(--brand-teal-light);

    /* burgundy on forest is 1.33:1, so actions switch to ochre (6.6:1) */
    --c-accent:       var(--brand-ochre);
    --c-accent-hover: color-mix(in srgb, var(--brand-ochre) 85%, white);
    --c-on-accent:    var(--brand-forest);
    --c-focus:        color-mix(in srgb, var(--brand-ochre) 40%, transparent);

    --c-danger:  var(--brand-blush);
    --c-success: var(--brand-mint);
    --c-warning: var(--brand-ochre);

    --c-nav-active-bg: var(--brand-cream);
    --c-nav-active-fg: var(--brand-forest);

    --c-header: color-mix(in srgb, black 22%, var(--brand-forest));

    --pattern-tint: color-mix(in srgb, var(--brand-white) 6%, transparent);

    --shadow-sm: 0 1px 2px color-mix(in srgb, black 30%, transparent);
    --shadow-md: 0 8px 28px -8px color-mix(in srgb, black 55%, transparent);
    --shadow-lg: 0 16px 48px -12px color-mix(in srgb, black 65%, transparent);

    --label-concept-bg:     color-mix(in srgb, var(--brand-blush) 16%, transparent);
    --label-concept-color:  var(--brand-blush);
    --label-dataset-bg:     color-mix(in srgb, var(--brand-teal-light) 16%, transparent);
    --label-dataset-color:  var(--brand-teal-light);
    --label-metric-bg:      color-mix(in srgb, var(--brand-ochre) 16%, transparent);
    --label-metric-color:   var(--brand-ochre);
    --label-relation-bg:    color-mix(in srgb, var(--brand-mint) 14%, transparent);
    --label-relation-color: var(--brand-mint);

    --status-valid-dot: var(--brand-mint);

    --avatar-bg: var(--brand-teal-deep);
    --avatar-fg: var(--brand-mint);
}