/* =====================================================================
   Colman Design System — Colors & Typography
   Dark-only navy palette. Bootstrap 5 compatible.
   Usage: loaded via AssetMapper after bootstrap.css
   ===================================================================== */

:root,
[data-bs-theme="dark"] {
    /* =============================================================
       SURFACES — Navy base
       ============================================================= */
    --col-bg-0:            #13131f;   /* page background (edges, behind content) */
    --col-bg-1:            #1a1a2e;   /* body, primary surface */
    --col-bg-2:            #202036;   /* cards, widgets, elevated surface */
    --col-bg-3:            #272742;   /* hover on bg-2, secondary surface */
    --col-bg-4:            #2f2f4e;   /* active row, selected, tertiary */
    --col-overlay:         rgba(10, 10, 22, .72);
    --col-scrim:           rgba(10, 10, 22, .55);

    /* =============================================================
       BORDERS & DIVIDERS
       ============================================================= */
    --col-border:          #2a2a44;   /* default border */
    --col-border-strong:   #3a3a5c;   /* emphasized border (focus, selected) */
    --col-border-subtle:   #222238;   /* very subtle, inside dense tables */
    --col-divider:         #24243c;

    /* =============================================================
       TEXT
       ============================================================= */
    --col-fg-1:            #ecedf5;   /* primary — body, numbers */
    --col-fg-2:            #b4b6cc;   /* secondary — labels, meta */
    --col-fg-3:            #7a7d99;   /* tertiary — helpers, placeholders */
    --col-fg-4:            #545772;   /* disabled / low emphasis */
    --col-fg-inverse:      #0d0d18;   /* on accent fills */

    /* =============================================================
       ACCENT — Primary blue
       ============================================================= */
    --col-accent:          #4a9eff;
    --col-accent-hover:    #6aaeff;
    --col-accent-active:   #3a8ae5;
    --col-accent-soft:     rgba(74, 158, 255, .14);
    --col-accent-softer:   rgba(74, 158, 255, .07);
    --col-accent-ring:     rgba(74, 158, 255, .35);

    /* =============================================================
       BRAND NEONS — sampled from the 3-cards logo, pushed to neon
       Brand-blue  : #2977bb (logo) → #3dbbff neon
       Brand-green : #12723c (logo) → #36e27c neon
       Brand-beige : #eee9cb (logo) → #fff4b8 neon (warm off-white)
       Use sparingly for brand moments (mark halo, hero KPI accents).
       ============================================================= */
    --brand-blue:          #3dbbff;
    --brand-blue-strong:   #7cd2ff;
    --brand-blue-deep:     #1e8dd6;
    --brand-blue-soft:     rgba(61, 187, 255, .14);
    --brand-blue-glow:     0 0 10px rgba(61, 187, 255, .55), 0 0 22px rgba(61, 187, 255, .32);

    --brand-green:         #36e27c;
    --brand-green-strong:  #6ef29b;
    --brand-green-deep:    #1aa858;
    --brand-green-soft:    rgba(54, 226, 124, .14);
    --brand-green-glow:    0 0 10px rgba(54, 226, 124, .55), 0 0 22px rgba(54, 226, 124, .28);

    --brand-beige:         #fff4b8;
    --brand-beige-strong:  #fffadd;
    --brand-beige-deep:    #d6cc8a;
    --brand-beige-soft:    rgba(255, 244, 184, .14);
    --brand-beige-glow:    0 0 8px rgba(255, 244, 184, .40), 0 0 18px rgba(255, 244, 184, .20);

    /* Neon orange — for spike-warning moments, alerts level 2, foil flash */
    --brand-orange:        #ff8a3d;
    --brand-orange-strong: #ffb07c;
    --brand-orange-deep:   #d66a1a;
    --brand-orange-soft:   rgba(255, 138, 61, .14);
    --brand-orange-glow:   0 0 10px rgba(255, 138, 61, .55), 0 0 22px rgba(255, 138, 61, .28);

    /* Neon red — for critical alerts, spikes level 1, destructive-high-signal */
    --brand-red:           #ff4d6d;
    --brand-red-strong:    #ff8099;
    --brand-red-deep:      #d62d4d;
    --brand-red-soft:      rgba(255, 77, 109, .14);
    --brand-red-glow:      0 0 10px rgba(255, 77, 109, .55), 0 0 22px rgba(255, 77, 109, .28);

    /* =============================================================
       SEMANTIC / FEEDBACK
       ============================================================= */
    --col-success:         #3ec28a;
    --col-success-soft:    rgba(62, 194, 138, .14);
    --col-warning:         #f5b041;
    --col-warning-soft:    rgba(245, 176, 65, .14);
    --col-danger:          #ef5a6f;
    --col-danger-soft:     rgba(239, 90, 111, .14);
    --col-info:            #5bc0de;
    --col-info-soft:       rgba(91, 192, 222, .14);

    /* =============================================================
       COPY STATUS BADGES (dark navy tuned)
       Preserves existing semantic keys: col/stk/tri/list/vte
       ============================================================= */
    --status-col-bg:       #16382a;   --status-col-text:  #7bdcaf;   /* in_collection */
    --status-stk-bg:       #0f2d3e;   --status-stk-text:  #7dd3ee;   /* stock */
    --status-tri-bg:       #2a2a3e;   --status-tri-text:  #b4b6cc;   /* to_sort */
    --status-list-bg:      #3d2c0d;   --status-list-text: #f5b041;   /* to_list */
    --status-vte-bg:       #3d1420;   --status-vte-text:  #ef8796;   /* for_sale */
    --status-sold-bg:      #20202e;   --status-sold-text: #7a7d99;   /* sold (exit) */

    /* =============================================================
       MTG RARITY DOTS
       ============================================================= */
    --rarity-common:       #9a9db4;
    --rarity-uncommon:     #8cc6dd;
    --rarity-rare:         #d4b24c;
    --rarity-mythic:       #e97742;

    /* =============================================================
       FOIL — gold accent for premium finishes
       ============================================================= */
    --foil-color:          #d4a843;
    --foil-soft:           rgba(212, 168, 67, .18);

    /* =============================================================
       ROW HIGHLIGHTS
       ============================================================= */
    --highlight-trend-bg:  rgba(62, 194, 138, .12);    /* trend price attention */
    --highlight-manual-bg: rgba(74, 158, 255, .10);    /* manually edited */
    --highlight-entered-bg:rgba(62, 194, 138, .09);    /* card has copies */

    /* =============================================================
       MTG COLOR IDENTITY (WUBRG)
       ============================================================= */
    --mtg-w:               #f5efd3;
    --mtg-u:               #4a9eff;
    --mtg-b:               #1a1a2e;
    --mtg-r:               #ef5a6f;
    --mtg-g:               #3ec28a;
    --mtg-c:               #9a9db4;   /* colorless */
    --mtg-m:               #d4a843;   /* multi-color gold */

    /* =============================================================
       TYPOGRAPHY — stack & scale
       ============================================================= */
    --font-sans:
        "Inter",
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;
    --font-mono:
        "JetBrains Mono",
        ui-monospace,
        "SFMono-Regular",
        Menlo,
        Consolas,
        "Liberation Mono",
        monospace;

    /* Compact scale (preserved for backwards compat) */
    --font-xs:    .65rem;    /* 10.4px — uppercase eyebrows, collector numbers */
    --font-sm:    .75rem;    /* 12px   — badges, set codes, secondary */
    --font-base:  .85rem;    /* 13.6px — body, table cells, EN name, inputs */
    --font-md:    .95rem;    /* 15.2px — FR card name, section titles */
    --font-lg:   1.15rem;    /* 18.4px — page sub-headings, stat values */

    /* Extended scale for dashboard & headers */
    --font-xl:   1.5rem;     /* 24px   — widget KPI values */
    --font-2xl:  2rem;       /* 32px   — hero KPI */
    --font-3xl:  2.75rem;    /* 44px   — dashboard lead number */

    /* Weights */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Line heights */
    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-normal:  1.5;

    /* Letter spacing */
    --tracking-tight:    -0.01em;
    --tracking-normal:    0;
    --tracking-wide:      0.04em;
    --tracking-wider:     0.08em;
    --tracking-widest:    0.14em;   /* overline caps */

    /* =============================================================
       SPACING SCALE
       ============================================================= */
    --space-3xs:  .125rem;   /* 2px */
    --space-xs:   .25rem;    /* 4px */
    --space-sm:   .5rem;     /* 8px */
    --space-md:   .75rem;    /* 12px */
    --space-lg:   1rem;      /* 16px */
    --space-xl:   1.5rem;    /* 24px */
    --space-2xl:  2rem;      /* 32px */
    --space-3xl:  3rem;      /* 48px */

    /* =============================================================
       RADII
       ============================================================= */
    --radius-xs:   3px;    /* thumbnails */
    --radius-sm:   4px;    /* badges, small inputs */
    --radius-md:   6px;    /* tiles, buttons */
    --radius-lg:   8px;    /* cards, widgets */
    --radius-xl:  12px;    /* modals, hero surfaces */
    --radius-pill:999px;

    /* =============================================================
       ELEVATION / SHADOWS
       ============================================================= */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm:  0 2px 6px rgba(0, 0, 0, .35);
    --shadow-md:  0 4px 14px rgba(0, 0, 0, .45);
    --shadow-lg:  0 10px 30px rgba(0, 0, 0, .55);
    --shadow-focus: 0 0 0 3px var(--col-accent-ring);
    --shadow-inset-hair: inset 0 1px 0 rgba(255, 255, 255, .04);

    /* =============================================================
       MOTION
       ============================================================= */
    --ease-out:   cubic-bezier(.22, .61, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-fast:   .12s;
    --dur-base:   .18s;
    --dur-slow:   .28s;

    /* =============================================================
       LAYOUT CONSTANTS
       ============================================================= */
    --header-height:       56px;
    --footer-height:       44px;
    --sidebar-width:       240px;
    --content-max-width:   1800px;
    --dashboard-gutter:    var(--space-lg);

    /* =============================================================
       TILE DIMENSIONS
       ============================================================= */
    --tile-min-width:      440px;
    --tile-image-width:    170px;
    --tile-gap:            var(--space-md);

    /* =============================================================
       BOOTSTRAP OVERRIDES
       (map Bootstrap variables onto Colman tokens)
       ============================================================= */
    --bs-body-bg:          var(--col-bg-1);
    --bs-body-color:       var(--col-fg-1);
    --bs-body-color-rgb:   236, 237, 245;
    --bs-secondary-bg:     var(--col-bg-2);
    --bs-tertiary-bg:      var(--col-bg-3);
    --bs-secondary-color:  var(--col-fg-2);
    --bs-tertiary-color:   var(--col-fg-3);
    --bs-border-color:     var(--col-border);
    --bs-border-color-translucent: var(--col-border-subtle);

    --bs-primary:          var(--col-accent);
    --bs-primary-rgb:      74, 158, 255;
    --bs-success:          var(--col-success);
    --bs-warning:          var(--col-warning);
    --bs-danger:           var(--col-danger);
    --bs-info:             var(--col-info);

    --bs-link-color:           var(--col-accent);
    --bs-link-hover-color:     var(--col-accent-hover);
}

/* =====================================================================
   BASE TYPE
   ===================================================================== */

html, body {
    background: var(--col-bg-0);
    color: var(--col-fg-1);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Semantic type roles */
.col-h1 {
    font-size: var(--font-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--col-fg-1);
    margin: 0;
}
.col-h2 {
    font-size: var(--font-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--col-fg-1);
    margin: 0;
}
.col-h3 {
    font-size: var(--font-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--col-fg-1);
    margin: 0;
}
.col-eyebrow {
    font-size: var(--font-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--col-fg-3);
}
.col-body   { font-size: var(--font-base); color: var(--col-fg-1); }
.col-meta   { font-size: var(--font-sm);   color: var(--col-fg-2); }
.col-muted  { color: var(--col-fg-3); }

.col-kpi {
    font-size: var(--font-3xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--col-fg-1);
}
.col-kpi-md {
    font-size: var(--font-2xl);
    font-weight: var(--fw-semibold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--col-fg-1);
}
.col-kpi-sm {
    font-size: var(--font-xl);
    font-weight: var(--fw-semibold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--col-fg-1);
}
.col-mono {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-feature-settings: "zero", "ss02";
}
.col-tabular { font-variant-numeric: tabular-nums; }

/* Selection */
::selection {
    background: var(--col-accent-soft);
    color: var(--col-fg-1);
}

/* Focus ring — unified */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--col-accent) !important;
}

/* Scrollbars — minimal dark */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--col-bg-4) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--col-bg-4);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--col-border-strong);
    background-clip: padding-box;
    border: 2px solid transparent;
}