/*
 * Archbot.co — Design System Color Tokens
 * Version 1.0 | June 2026
 *
 * Bootstrap 5 compatibility:
 *   - All --bs-* overrides are in the :root block below.
 *   - Bootstrap's theme colors (primary, secondary, success, info,
 *     warning, danger) are remapped to Archbot accents.
 *   - RGB channel variables (--bs-primary-rgb etc.) are provided
 *     so Bootstrap's rgba() utilities (bg-primary bg-opacity-10 etc.)
 *     continue to work correctly.
 *   - Custom Archbot tokens sit alongside --bs-* tokens in the same
 *     :root so they are available globally without extra imports.
 *
 * Usage:
 *   Import this file AFTER bootstrap.css so Archbot overrides win.
 *   <link rel="stylesheet" href="bootstrap.min.css">
 *   <link rel="stylesheet" href="colors.css">
 */

/* ============================================================
   ROOT — all tokens
   ============================================================ */

:root {

    /* ----------------------------------------------------------
     NAVY CANVAS RAMP
     The dark background broken into elevation steps.
     Not an accent color — the foundation the page sits on.
  ---------------------------------------------------------- */

    --color-navy-50: #E8EBF2;
    --color-navy-100: #B8C0D4;
    --color-navy-200: #7A8AAE;
    --color-navy-400: #3A4A6E;
    --color-navy-600: #1A2035;
    --color-navy-800: #0D1122;
    --color-navy-900: #080C18;
    /* base canvas */

    /* ----------------------------------------------------------
     BACKGROUND TOKENS
     Named by layer / purpose, not by raw shade.
  ---------------------------------------------------------- */

    /* Dark canvas layers */
    --color-bg-canvas: #080C18;
    /* hero, nav, CTA, footer */
    --color-bg-canvas-raised: #0D1122;
    /* stats bar, secondary dark sections */
    --color-bg-surface-dark: #1A2035;
    /* cards on dark, code panels */

    /* Light surface layers */
    --color-bg-page: #F0F1F4;
    /* light-mode page background */
    --color-bg-surface: #FFFFFF;
    /* card backgrounds, white sections */
    --color-bg-surface-muted: #F7F8FB;
    /* diagram boxes, inset panels */

    /* ----------------------------------------------------------
     BORDER TOKENS
  ---------------------------------------------------------- */

    --color-border-default: #D8DCE5;
    /* cards on light bg */
    --color-border-dark: rgba(255, 255, 255, 0.08);
    /* dividers on dark canvas */

    /* ----------------------------------------------------------
     TEXT TOKENS — light context
  ---------------------------------------------------------- */

    --color-text-heading: #080C18;
    /* headings on light bg */
    --color-text-body: #6B7280;
    /* body copy */
    --color-text-muted: #9CA3AF;
    /* labels, captions */

    /* ----------------------------------------------------------
     TEXT TOKENS — dark context
  ---------------------------------------------------------- */

    --color-text-on-dark: rgba(255, 255, 255, 0.88);
    /* headings on dark */
    --color-text-on-dark-muted: rgba(255, 255, 255, 0.42);
    /* body on dark */
    --color-text-on-dark-faint: rgba(255, 255, 255, 0.28);
    /* labels on dark */

    /* ----------------------------------------------------------
     ACCENT — BLUE (primary action)
     CTAs, links, active states, logo mark, hero accent.
  ---------------------------------------------------------- */

    --accent-blue-50: #EBF2FF;
    --accent-blue-100: #B8D0F7;
    --accent-blue-200: #7AADEE;
    --accent-blue-300: #4A9EFF;
    --accent-blue-400: #2D6FE8;
    /* base */
    --accent-blue-600: #1A4FBF;
    --accent-blue-800: #0E3280;

    /* RGB channels for Bootstrap opacity utilities */
    --accent-blue-400-rgb: 45, 111, 232;

    /* ----------------------------------------------------------
     ACCENT — TEAL (forward motion / delivery)
     Migration cards, success states, reliability stats,
     team section eyebrow + CTA.
  ---------------------------------------------------------- */

    --accent-teal-50: #E0F5F2;
    --accent-teal-100: #A8E8DF;
    --accent-teal-200: #5ECFC4;
    --accent-teal-300: #1EC9B5;
    --accent-teal-400: #1A9B8A;
    /* base */
    --accent-teal-600: #0F6B5E;
    --accent-teal-800: #084840;

    --accent-teal-400-rgb: 26, 155, 138;

    /* ----------------------------------------------------------
     ACCENT — VIOLET (analysis / depth)
     Audit cards, diagram layer nodes, architecture eyebrow + CTA,
     violet badges.
  ---------------------------------------------------------- */

    --accent-violet-50: #EEEAFB;
    --accent-violet-100: #CEC7F5;
    --accent-violet-200: #A392F5;
    --accent-violet-300: #8270EE;
    --accent-violet-400: #6B5CE7;
    /* base */
    --accent-violet-600: #4A3EBF;
    --accent-violet-800: #2D2680;

    --accent-violet-400-rgb: 107, 92, 231;

    /* ----------------------------------------------------------
     ACCENT — AMBER (sparse highlight only)
     Stat callouts, warnings. Max 1–2 uses per page.
     Never use as a section or button color.
  ---------------------------------------------------------- */

    --accent-amber-50: #FFF4E3;
    --accent-amber-100: #FDDBA0;
    --accent-amber-200: #F7C060;
    --accent-amber-300: #F0A030;
    --accent-amber-400: #E8A030;
    /* base */
    --accent-amber-600: #B87520;
    --accent-amber-800: #7A4A10;

    --accent-amber-400-rgb: 232, 160, 48;

    /* ----------------------------------------------------------
     TYPOGRAPHY SCALE
  ---------------------------------------------------------- */

    --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    --text-display: 32px;
    /* hero H1 */
    --text-h2: 22px;
    /* section headings */
    --text-h3: 16px;
    /* card titles */
    --text-body: 14px;
    /* body copy */
    --text-small: 13px;
    /* descriptions */
    --text-label: 11px;
    /* eyebrows, badges, nav */
    --text-mono: 12px;
    /* code, hex values */

    /* ----------------------------------------------------------
     SPACING SCALE (4px grid)
  ---------------------------------------------------------- */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-14: 56px;
    --space-16: 64px;

    /* ----------------------------------------------------------
     BORDER RADIUS SCALE
  ---------------------------------------------------------- */

    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --radius-pill: 0px;
    --radius-full: 0;

    /* ----------------------------------------------------------
     DOT GRID TEXTURE (for hero / CTA overlays)
  ---------------------------------------------------------- */

    /* ----------------------------------------------------------
     BACKGROUND MESH CONFIG
     Controls the dynamic node/edge network rendered per page.
  ---------------------------------------------------------- */

    --mesh-node-count: 45;
    --mesh-connection-distance: 280;
    --mesh-node-radius: 2;
    --mesh-node-opacity: 0.8;
    --mesh-edge-opacity: 0.8;
    --mesh-edge-width: 0.6;
    --mesh-opacity: .5;

    --texture-dot-grid:
        radial-gradient(circle, rgba(45, 111, 232, 0.10) 1px, transparent 1px);
    --texture-dot-grid-size: 28px 28px;

    /* ----------------------------------------------------------
     BOOTSTRAP 5 THEME OVERRIDES
     These remap Bootstrap's --bs-* tokens to Archbot values
     so Bootstrap components (buttons, badges, alerts, etc.)
     use the Archbot palette automatically.
  ---------------------------------------------------------- */

    /* Primary → Blue */
    --bs-primary: #2D6FE8;
    --bs-primary-rgb: 45, 111, 232;

    /* Secondary → Navy surface (neutral dark) */
    --bs-secondary: #1A2035;
    --bs-secondary-rgb: 26, 32, 53;

    /* Success → Teal */
    --bs-success: #1A9B8A;
    --bs-success-rgb: 26, 155, 138;

    /* Info → Blue-300 (lighter informational) */
    --bs-info: #4A9EFF;
    --bs-info-rgb: 74, 158, 255;

    /* Warning → Amber */
    --bs-warning: #E8A030;
    --bs-warning-rgb: 232, 160, 48;

    /* Danger → stays red-ish, nudged warm */
    --bs-danger: #D84040;
    --bs-danger-rgb: 216, 64, 64;

    /* Light → page background */
    --bs-light: #F0F1F4;
    --bs-light-rgb: 240, 241, 244;

    /* Dark → canvas */
    --bs-dark: #080C18;
    --bs-dark-rgb: 8, 12, 24;

    /* Body text */
    --bs-body-color: #6B7280;
    --bs-body-bg: #F0F1F4;
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--text-body);
    --bs-body-line-height: 1.72;

    /* Headings */
    --bs-heading-color: #080C18;

    /* Links */
    --bs-link-color: #2D6FE8;
    --bs-link-hover-color: #4A9EFF;

    /* Border */
    --bs-border-color: #D8DCE5;
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-xl);
    --bs-border-radius-pill: var(--radius-pill);

    /* Card */
    --bs-card-border-color: #D8DCE5;
    --bs-card-border-radius: var(--radius-xl);
    --bs-card-bg: #FFFFFF;
}

/* ============================================================
   UTILITY CLASSES
   Archbot-specific shorthand utilities not covered by Bootstrap.
   ============================================================ */

/* Backgrounds */
.bg-canvas {
    background-color: var(--color-bg-canvas) !important;
}

.bg-canvas-raised {
    background-color: var(--color-bg-canvas-raised) !important;
}

.bg-surface-dark {
    background-color: var(--color-bg-surface-dark) !important;
}

.bg-page {
    background-color: var(--color-bg-page) !important;
}

.bg-surface-muted {
    background-color: var(--color-bg-surface-muted) !important;
}

/* Text — light context */
.text-heading {
    color: var(--color-text-heading) !important;
}

.text-body-copy {
    color: var(--color-text-body) !important;
}

.text-muted-light {
    color: var(--color-text-muted) !important;
}

/* Text — dark context */
.text-on-dark {
    color: var(--color-text-on-dark) !important;
}

.text-on-dark-muted {
    color: var(--color-text-on-dark-muted) !important;
}

.text-on-dark-faint {
    color: var(--color-text-on-dark-faint) !important;
}

/* Accent text */
.text-blue {
    color: var(--accent-blue-400) !important;
}

.text-teal {
    color: var(--accent-teal-400) !important;
}

.text-violet {
    color: var(--accent-violet-400) !important;
}

.text-amber {
    color: var(--accent-amber-400) !important;
}

/* Accent backgrounds (base) */
.bg-blue {
    background-color: var(--accent-blue-400) !important;
}

.bg-teal {
    background-color: var(--accent-teal-400) !important;
}

.bg-violet {
    background-color: var(--accent-violet-400) !important;
}

.bg-amber {
    background-color: var(--accent-amber-400) !important;
}

/* Accent tint backgrounds (50-stop, for badges) */
.bg-blue-tint {
    background-color: var(--accent-blue-50) !important;
}

.bg-teal-tint {
    background-color: var(--accent-teal-50) !important;
}

.bg-violet-tint {
    background-color: var(--accent-violet-50) !important;
}

.bg-amber-tint {
    background-color: var(--accent-amber-50) !important;
}

/* Accent text on tint (800-stop, for badge text) */
.text-blue-deep {
    color: var(--accent-blue-800) !important;
}

.text-teal-deep {
    color: var(--accent-teal-800) !important;
}

.text-violet-deep {
    color: var(--accent-violet-800) !important;
}

.text-amber-deep {
    color: var(--accent-amber-800) !important;
}

/* Border utilities */
.border-default {
    border: 0.5px solid var(--color-border-default) !important;
}

.border-dark {
    border: 0.5px solid var(--color-border-dark) !important;
}

/* Card accent top borders */
.card-accent-blue {
    border-top: 3px solid var(--accent-blue-400) !important;
}

.card-accent-teal {
    border-top: 3px solid var(--accent-teal-400) !important;
}

.card-accent-violet {
    border-top: 3px solid var(--accent-violet-400) !important;
}

/* Dot grid texture overlay (use with position: relative + overflow: hidden on parent) */
.texture-dot-grid {
    background-image: var(--texture-dot-grid);
    background-size: var(--texture-dot-grid-size);
}

/* Eyebrow / section label */
.eyebrow {
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eyebrow-blue {
    color: var(--accent-blue-400);
}

.eyebrow-teal {
    color: var(--accent-teal-400);
}

.eyebrow-violet {
    color: var(--accent-violet-400);
}

/* Hero pill */
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(45, 111, 232, 0.10);
    border: 1px solid rgba(45, 111, 232, 0.28);
    color: var(--accent-blue-300);
    font-size: var(--text-small);
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Archbot badge (ramp-50 bg + ramp-800 text) */
.badge-blue {
    background: var(--accent-blue-50);
    color: var(--accent-blue-800);
}

.badge-teal {
    background: var(--accent-teal-50);
    color: var(--accent-teal-800);
}

.badge-violet {
    background: var(--accent-violet-50);
    color: var(--accent-violet-800);
}

.badge-amber {
    background: var(--accent-amber-50);
    color: var(--accent-amber-800);
}