/* M33 design tokens
 * =================
 *
 * Single source of truth for colors, spacing, typography, and motion.
 * Every other stylesheet should read from these variables. Right now the
 * site still uses hard-coded values in many places — that's intentional
 * during the migration. New code should use tokens; existing code gets
 * converted opportunistically (see MILESTONES.md M2.5+).
 *
 * Naming: --<category>-<role>-<modifier>
 *   --c-bg-base       // surface, role: base, no modifier
 *   --c-text-muted    // text, role: muted
 *   --c-accent-blue   // accent, named blue
 *
 * Numeric scales use t-shirt or step naming:
 *   --space-1..12, --radius-sm/md/lg/full, --text-xs..5xl
 */

:root {
    /* ── Surfaces (page bg → cards → elevated) ────────────────────── */
    --c-bg-base:           #1f2937;                  /* gray-800; body, sections */
    --c-bg-surface:        #374151;                  /* gray-700; raised cards on home gallery, tools tiles */
    --c-bg-surface-deep:   #1f2937;                  /* scan pages keep darker cards for legibility */
    --c-bg-elevated:       #4b5563;                  /* gray-600; rare, for popovers if needed */
    --c-bg-translucent:    rgba(31, 41, 55, 0.6);    /* progress theater, audit-field input */
    --c-bg-shell:          rgba(31, 41, 55, 0.45);   /* outer report wrapper */

    /* ── Text ─────────────────────────────────────────────────────── */
    --c-text-primary:      #f3f4f6;                  /* gray-100; headings, card titles */
    --c-text-body:         #d1d5db;                  /* gray-300; body copy in cards */
    --c-text-secondary:    #9ca3af;                  /* gray-400; nav links, descriptions */
    --c-text-muted:        #6b7280;                  /* gray-500; small print, labels */
    --c-text-disabled:     #4b5563;                  /* gray-600; placeholders, hints */
    --c-text-inverse:      #1f2937;                  /* dark text on light surfaces (chat bubbles) */

    /* ── Accent: blue (brand) ─────────────────────────────────────── */
    --c-blue-700:          #1d4ed8;                  /* button hover */
    --c-blue-600:          #2563eb;                  /* primary button bg, focus border */
    --c-blue-500:          #3b82f6;                  /* hover border, mid-gradient */
    --c-blue-400:          #60a5fa;                  /* pill border, hover lighter */
    --c-blue-300:          #93c5fd;                  /* link color, label color */
    --c-blue-200:          #bfdbfe;                  /* hover/pill text */

    /* ── Accent: green (ROI / success) ────────────────────────────── */
    --c-green-500:         #10b981;                  /* progress checkmark */
    --c-green-400:         #4ade80;                  /* unused but reserved */
    --c-green-300:         #86efac;                  /* ROI value, total amount */
    --c-green-200:         #6ee7b7;                  /* ROI label, "done" text */

    /* ── Accent: violet (gradient hint) ───────────────────────────── */
    --c-violet-700:        #6d28d9;
    --c-violet-600:        #7c3aed;
    --c-violet-500:        #8b5cf6;
    --c-violet-400:        #a78bfa;

    /* ── Status: error / warning ──────────────────────────────────── */
    --c-red-400:           #f87171;                  /* error text */
    --c-red-300:           #fca5a5;                  /* error message body */
    --c-amber-300:         #fbbf24;                  /* medium-confidence badge */

    /* ── Borders ──────────────────────────────────────────────────── */
    --c-border-subtle:     rgba(255, 255, 255, 0.13);/* gallery card outline */
    --c-border-quiet:      rgba(255, 255, 255, 0.05);/* dividers */
    --c-border-strong:     #374151;                  /* form input border */
    --c-border-blue-soft:  rgba(96, 165, 250, 0.6);  /* pill button border */

    /* ── Spacing (4px grid) ───────────────────────────────────────── */
    --space-0:             0;
    --space-1:             0.25rem;                  /* 4px */
    --space-2:             0.5rem;                   /* 8px */
    --space-3:             0.75rem;                  /* 12px */
    --space-4:             1rem;                     /* 16px */
    --space-5:             1.25rem;                  /* 20px */
    --space-6:             1.5rem;                   /* 24px */
    --space-7:             1.75rem;                  /* 28px */
    --space-8:             2rem;                     /* 32px */
    --space-10:            2.5rem;                   /* 40px */
    --space-12:            3rem;                     /* 48px */
    --space-16:            4rem;                     /* 64px */
    --space-20:            5rem;                     /* 80px */

    /* ── Border-radius ────────────────────────────────────────────── */
    --radius-sm:           0.25rem;                  /* tags, micro */
    --radius-md:           0.5rem;                   /* buttons, inputs */
    --radius-lg:           0.75rem;                  /* cards */
    --radius-xl:           1rem;                     /* outer shells */
    --radius-full:         9999px;                   /* pills, avatars */

    /* ── Typography (rem-based) ───────────────────────────────────── */
    --text-xs:             0.75rem;                  /* 12px; kickers, micro labels */
    --text-sm:             0.875rem;                 /* 14px; secondary copy */
    --text-base:           1rem;                     /* 16px; body, inputs */
    --text-lg:             1.125rem;                 /* 18px; lead paragraph */
    --text-xl:             1.25rem;                  /* 20px; card titles */
    --text-2xl:            1.5rem;                   /* 24px; sub-headings */
    --text-3xl:            1.875rem;                 /* 30px; section headings */
    --text-4xl:            2.25rem;                  /* 36px; hero h2 */
    --text-5xl:            3rem;                     /* 48px; hero h1 desktop */

    /* Line heights */
    --leading-tight:       1.2;
    --leading-snug:        1.35;
    --leading-normal:      1.55;
    --leading-relaxed:     1.65;

    /* Font weights */
    --weight-normal:       400;
    --weight-medium:       500;
    --weight-semibold:     600;
    --weight-bold:         700;
    --weight-black:        800;

    /* ── Motion ───────────────────────────────────────────────────── */
    --tx-fast:             0.15s ease;               /* hover/focus state changes */
    --tx-normal:           0.3s ease;                /* panel slide, scale */
    --tx-slow:             0.5s ease;                /* button shimmer */
    --tx-very-slow:        15s ease-in-out;          /* gradient, ambient */

    /* ── Shadow ───────────────────────────────────────────────────── */
    --shadow-card:         0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-glow-blue:    0 0 30px rgba(37, 99, 235, 0.08);
    --shadow-modal:        -24px 0 60px rgba(0, 0, 0, 0.45);

    /* ── Layout ───────────────────────────────────────────────────── */
    --layout-shell-max:    760px;                    /* audit report width */
    --layout-content-max:  800px;                    /* hero content width */

    /* ── Z-index scale ────────────────────────────────────────────── */
    --z-dropdown:          10;
    --z-mobile-menu:       40;
    --z-header:            50;
    --z-modal:             100;
}