/*
 * Drumbeat design tokens — the one place colours, type and shape are decided.
 *
 * The palette is the website's (drumbeat-website src/styles/v3.css, the --v3-* set), so the
 * app and drumbeat.com are one brand. The app keeps its own near-white page and the
 * orange→crimson gradient on primary actions; both are single tokens here.
 *
 * Status colours (success / warning / danger / info) are deliberately NOT brand colours:
 * a green "done" and a red "failed" must never be confused with an orange call to action.
 *
 * Loaded before style.css on every page, and before Bootstrap's compiled defaults are
 * overridden, so Bootstrap classes (text-primary, alert-info, btn-outline-primary …) come
 * out on-brand. There is no Bootstrap blue anywhere in the app.
 */
:root {
    /* ── Brand palette (website v3) ─────────────────────────────── */
    --ink:          #241B33;   /* headings, primary text — near-black aubergine */
    --ink-body:     #4A4256;   /* secondary copy */
    --ink-mute:     #625B6E;   /* captions, meta, labels (5.9:1 on white) */
    --ink-faint:    #736C7E;   /* the floor for small text (4.7:1) */
    --ink-bg:       #1A1226;   /* dark bands, user chat bubble */
    --rule:         rgba(36, 27, 51, 0.12);
    --rule-soft:    rgba(36, 27, 51, 0.07);
    --rule-strong:  #D6D1DD;   /* dashed empties, hover borders, muted chart marks */

    --orange:       #F8542E;   /* the logo colour: bars, marks, accents */
    --orange-ink:   #D93A14;   /* orange carrying text, or white text on it (4.6:1) */
    --orange-deep:  #B72E0E;
    --orange-tint:  #FEF0EC;   /* selected / highlighted surfaces */
    --crimson:      #E8174B;
    --rose:         #D07E84;
    --blush:        #EFA0B0;
    --violet:       #6E5E8C;
    --violet-deep:  #4A3D63;
    --violet-tint:  #EFECF4;

    /* ── Surfaces ──────────────────────────────────────────────── */
    --surface-page:   #F8F9FC; /* app page background */
    --surface:        #FFFFFF; /* cards, panels */
    --surface-muted:  #F6F5F8; /* inset panels, table heads, quiet fills */
    --surface-hover:  #F1EFF4;
    --surface-board:  #EBE7E2; /* kanban columns (website --v3-bg-sunk) */

    /* ── Status (never brand colours) — solid / tint / text ────── */
    --success:        #16A34A;
    --success-tint:   #DCFCE7;
    --success-ink:    #15803D;
    --warning:        #F59E0B;
    --warning-tint:   #FEF3C7;
    --warning-ink:    #92400E;
    --danger:         #DC2626;
    --danger-tint:    #FEE2E2;
    --danger-ink:     #991B1B;
    --info:           var(--violet);
    --info-tint:      var(--violet-tint);
    --info-ink:       var(--violet-deep);
    --neutral:        #8A8494;
    --neutral-tint:   #F1EFF4;
    --neutral-ink:    var(--ink-body);

    /* ── Gradients ─────────────────────────────────────────────── */
    --gradient-accent: linear-gradient(135deg, var(--orange) 0%, var(--crimson) 100%);
    --gradient-accent-hover: linear-gradient(135deg, var(--orange-ink) 0%, #C8103E 100%);

    /* ── Type ──────────────────────────────────────────────────── */
    --font-sans:    'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Headings get their own token so a display face can be swapped in on one line. */
    --font-display: var(--font-sans);
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
    /* LinkedIn previews mimic LinkedIn, which renders in the system face. */
    --font-linkedin: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --li-blue: #0A66C2;          /* LinkedIn's own blue — only inside a LinkedIn mimic */
    --li-feed: #F3F2F0;          /* LinkedIn feed grey behind a nested post */

    --text-xs:   0.72rem;   /* eyebrows, pills, meta */
    --text-sm:   0.8125rem; /* secondary copy */
    --text-base: 0.9375rem;
    --text-md:   1rem;
    --text-lg:   1.15rem;   /* card titles */
    --text-xl:   1.5rem;    /* page titles */

    /* ── Shape & depth ─────────────────────────────────────────── */
    --radius-sm:   6px;     /* buttons, inputs */
    --radius:      12px;    /* cards */
    --radius-lg:   14px;    /* large containers, board columns */
    --radius-pill: 999px;
    --shadow-rest:  0 1px 3px rgba(36, 27, 51, 0.06);
    --shadow-hover: 0 6px 18px rgba(36, 27, 51, 0.11);
    --shadow-pop:   0 8px 24px rgba(36, 27, 51, 0.14);
    --shadow-modal: 0 28px 70px rgba(36, 27, 51, 0.40);
    --focus-ring:   0 0 0 3px rgba(248, 84, 46, 0.25);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* ── Legacy names, kept so existing var() references resolve ─ */
    --midnight:        var(--ink);
    --primary:         var(--ink);
    --primary-light:   var(--violet-deep);
    --primary-dark:    var(--ink-bg);
    --primary-subtle:  var(--violet-tint);
    --purple-dark:     var(--ink-bg);
    --purple-mid:      var(--violet-deep);
    --purple-accent:   var(--violet);
    --thunderclap-purple: var(--violet);
    --accent-orange:   var(--orange);
    --accent-pink:     var(--crimson);
    --secondary:       var(--surface);
    --secondary-dark:  var(--surface-muted);
    --secondary-mid:   #E6E3EA;
    --secondary-light: var(--surface-muted);
    --text-dark:       var(--ink);
    --text-muted:      var(--ink-mute);
    --border-color:    #E6E3EA;
    --card-shadow:     var(--shadow-rest);
    --gradient-brand:  linear-gradient(135deg, var(--ink-bg) 0%, var(--ink) 50%, var(--violet-deep) 100%);
    --gradient-text:   linear-gradient(135deg, var(--orange), var(--crimson), var(--violet));

    /* ── Bootstrap, pointed at the tokens ──────────────────────── */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: 36, 27, 51;
    --bs-body-bg: var(--surface-page);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--ink-mute);
    --bs-tertiary-color: var(--ink-faint);
    --bs-secondary-bg: var(--surface-muted);
    --bs-tertiary-bg: var(--surface-muted);
    --bs-border-color: #E6E3EA;
    --bs-border-color-translucent: var(--rule);
    --bs-heading-color: var(--ink);
    --bs-link-color: var(--orange-ink);
    --bs-link-color-rgb: 217, 58, 20;
    --bs-link-hover-color: var(--orange-deep);
    --bs-link-hover-color-rgb: 183, 46, 14;
    --bs-focus-ring-color: rgba(248, 84, 46, 0.25);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 8px;
    --bs-border-radius-xl: var(--radius);
    --bs-border-radius-xxl: var(--radius-lg);

    --bs-primary: var(--orange-ink);
    --bs-primary-rgb: 217, 58, 20;
    --bs-primary-text-emphasis: var(--orange-deep);
    --bs-primary-bg-subtle: var(--orange-tint);
    --bs-primary-border-subtle: #FBC9BC;

    --bs-secondary: var(--ink-mute);
    --bs-secondary-rgb: 98, 91, 110;
    --bs-secondary-text-emphasis: var(--ink-body);
    --bs-secondary-bg-subtle: var(--surface-muted);
    --bs-secondary-border-subtle: #E6E3EA;

    --bs-success: var(--success);
    --bs-success-rgb: 22, 163, 74;
    --bs-success-text-emphasis: var(--success-ink);
    --bs-success-bg-subtle: var(--success-tint);
    --bs-success-border-subtle: #BBF7D0;

    --bs-warning: var(--warning);
    --bs-warning-rgb: 245, 158, 11;
    --bs-warning-text-emphasis: var(--warning-ink);
    --bs-warning-bg-subtle: var(--warning-tint);
    --bs-warning-border-subtle: #FDE68A;

    --bs-danger: var(--danger);
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-text-emphasis: var(--danger-ink);
    --bs-danger-bg-subtle: var(--danger-tint);
    --bs-danger-border-subtle: #FECACA;

    --bs-info: var(--violet);
    --bs-info-rgb: 110, 94, 140;
    --bs-info-text-emphasis: var(--violet-deep);
    --bs-info-bg-subtle: var(--violet-tint);
    --bs-info-border-subtle: #D9D3E4;

    --bs-light-rgb: 246, 245, 248;
    --bs-dark: var(--ink);
    --bs-dark-rgb: 36, 27, 51;
}