/* ==========================================================================
   Farr Hub – design tokens

   The ONE file with a colour literal. The design language follows the
   CostGuard application design system (warm paper surfaces, ink text, one
   accent in a fill role and a text role, hairline borders, small shadows),
   with the Farr brand: lapis as the accent, gold only in the brand mark.
   hub-app.css maps these tokens onto Bootstrap and declares no colour.
   ========================================================================== */

:root {
    /* ── Raw palette – never used directly by components ───────────────── */
    --hub-ink-950:   #0a1020;
    --hub-ink-600:   #566079;
    --hub-ink-400:   #8a93a8;
    --hub-paper-50:  #faf8f4;
    --hub-paper-100: #f2efe8;
    --hub-paper-200: #e7e2d8;
    --hub-paper-300: #d5cfc2;

    --hub-navy-950:  #050914;
    --hub-navy-900:  #080d1a;
    --hub-navy-800:  #0f1729;
    --hub-navy-700:  #172138;

    /* Lapis – the one accent. 700 to 500 carry white text at AA or better;
       300 is the accent as text on a dark surface. */
    --hub-lapis-700: #1b3192;
    --hub-lapis-600: #233fb5;
    --hub-lapis-500: #3553d6;
    --hub-lapis-300: #9cb0ff;

    /* Gold – the farr, used by the brand mark only. */
    --hub-gold-500:  #d4a017;
    --hub-gold-300:  #f0c955;

    /* ── Semantic aliases – swapped per theme below ────────────────────── */
    --hub-accent:       var(--hub-lapis-600);
    --hub-accent-rgb:   35, 63, 181;
    --hub-accent-hover: var(--hub-lapis-700);
    --hub-accent-text:  var(--hub-lapis-600);
    --hub-accent-text-rgb: 35, 63, 181;
    --hub-on-accent:    #ffffff;
    --hub-accent-soft:  rgba(35, 63, 181, 0.08);
    --hub-focus-ring:   var(--hub-lapis-600);

    --hub-brand-mark:   var(--hub-gold-500);

    --hub-bg:           var(--hub-paper-50);
    --hub-bg-rgb:       250, 248, 244;
    --hub-bg-elevated:  #ffffff;
    --hub-bg-elevated-rgb: 255, 255, 255;
    --hub-bg-subtle:    var(--hub-paper-100);
    --hub-bg-subtle-rgb: 242, 239, 232;

    --hub-text-primary:   var(--hub-ink-950);
    --hub-text-primary-rgb: 10, 16, 32;
    --hub-text-secondary: var(--hub-ink-600);
    --hub-text-secondary-rgb: 86, 96, 121;
    --hub-text-disabled:  var(--hub-ink-400);

    --hub-border:        var(--hub-paper-200);
    --hub-border-strong: var(--hub-paper-300);

    /* Topic status (text and icon role). Each clears 4.5:1 on the three
       surfaces and on its own 12% tint; a status always carries a label. */
    --hub-status-new:   #233fb5;
    --hub-status-open:  #855600;
    --hub-status-done:  #15703f;
    --hub-status-error: #b3261e;
    --hub-status-muted: #4d566b;
    --hub-on-status:    #ffffff;

    --hub-status-new-rgb:   35, 63, 181;
    --hub-status-open-rgb:  133, 86, 0;
    --hub-status-done-rgb:  21, 112, 63;
    --hub-status-error-rgb: 179, 38, 30;
    --hub-status-muted-rgb: 77, 86, 107;

    --hub-shadow-sm: 0 1px 2px rgba(10, 16, 32, 0.05), 0 1px 1px rgba(10, 16, 32, 0.03);
    --hub-shadow-md: 0 6px 20px rgba(10, 16, 32, 0.07), 0 2px 6px rgba(10, 16, 32, 0.04);
    --hub-shadow-lg: 0 30px 70px -20px rgba(10, 16, 32, 0.22), 0 10px 24px -8px rgba(10, 16, 32, 0.08);

    --hub-scrim:        rgba(10, 16, 32, 0.45);
    --hub-header-bg:    rgba(250, 248, 244, 0.86);

    --hub-font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --hub-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
    --hub-font-mono: "Cascadia Code", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

    color-scheme: light;
}

/* ── Dark theme ──────────────────────────────────────────────────────── */
:root[data-bs-theme="dark"] {
    --hub-accent:       var(--hub-lapis-500);
    --hub-accent-rgb:   53, 83, 214;
    --hub-accent-hover: #4a66e6;
    --hub-accent-text:  var(--hub-lapis-300);
    --hub-accent-text-rgb: 156, 176, 255;
    --hub-accent-soft:  rgba(120, 145, 255, 0.14);
    --hub-focus-ring:   var(--hub-lapis-300);

    --hub-brand-mark:   var(--hub-gold-300);

    --hub-bg:           var(--hub-navy-900);
    --hub-bg-rgb:       8, 13, 26;
    --hub-bg-elevated:  var(--hub-navy-800);
    --hub-bg-elevated-rgb: 15, 23, 41;
    --hub-bg-subtle:    var(--hub-navy-950);
    --hub-bg-subtle-rgb: 5, 9, 20;

    --hub-text-primary:   #eef1f7;
    --hub-text-primary-rgb: 238, 241, 247;
    --hub-text-secondary: #a3adc4;
    --hub-text-secondary-rgb: 163, 173, 196;
    --hub-text-disabled:  #6b7590;

    --hub-border:        rgba(255, 255, 255, 0.09);
    --hub-border-strong: rgba(255, 255, 255, 0.18);

    --hub-status-new:   #9cb0ff;
    --hub-status-open:  #f2c661;
    --hub-status-done:  #6ddaa8;
    --hub-status-error: #ff8a80;
    --hub-status-muted: #aab3c7;
    --hub-on-status:    #0a1020;

    --hub-status-new-rgb:   156, 176, 255;
    --hub-status-open-rgb:  242, 198, 97;
    --hub-status-done-rgb:  109, 218, 168;
    --hub-status-error-rgb: 255, 138, 128;
    --hub-status-muted-rgb: 170, 179, 199;

    --hub-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --hub-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.40);
    --hub-shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.70), 0 10px 24px -8px rgba(0, 0, 0, 0.40);

    --hub-scrim:        rgba(0, 0, 0, 0.60);
    --hub-header-bg:    rgba(8, 13, 26, 0.82);

    color-scheme: dark;
}