/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/*
 * design-tokens.css — Agency V4.1
 *
 * Single-theme: Blade OS / Forest. Light mode has been removed —
 * this is now the canonical look.
 *
 * Sourced from blade-os-shared.jsx. The signature trait: surfaces
 * are translucent (rgba white over a tinted bg gradient), not solid
 * dark slabs. Borders step in white-alpha increments. Text is
 * lime-cream.
 *
 * Tokens that do NOT cascade from here (platform limitations):
 *   - availability.js STATUS_CONFIG colors  — FullCalendar JS API
 *   - SVG fill=/stroke= presentation attrs  — CSS vars not supported
 *   - Admin chart/spark line colors         — JS canvas/SVG path draws
 *   See DESIGN_SYSTEM.md §6 for the full exception list.
 */

:root {
    /* ── Background ramp (deepest → mid) ───────────────────────────────── */
    --bg:            #081915;
    --bg-mid:        #0E2826;

    /* ── Surfaces ──────────────────────────────────────────────────────── */
    --surface-deep:    #0D2420;   /* page bg muted, was --dark-surface-muted */
    --surface-base:    #112C26;   /* solid panel fallback */
    --surface-raised:  #163530;   /* hover / raised element */
    --surface-active:  #1C403A;   /* most elevated */

    /* Translucent panel layers — primary look. The bg gradient shows
       through these, which is where the depth comes from. */
    --glass-top:    rgba(255, 255, 255, 0.03);
    --glass-bottom: rgba(255, 255, 255, 0.01);
    --glass-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.07);

    /* ── Text — lime-tinted cream, not pure white ──────────────────────── */
    --text-main:  #E9FFC9;
    --text-sub:   rgba(233, 255, 201, 0.78);
    --text-muted: rgba(233, 255, 201, 0.52);
    --text-light: rgba(233, 255, 201, 0.28);
    --text-faint: rgba(233, 255, 201, 0.28);

    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-mono:    "IBM Plex Mono", "Courier New", monospace;
    --font-body:    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* legacy aliases — kept for backward-compat with any inline references */
    --font-sans:    var(--font-body);
    --blade-font:   var(--font-body);

    /* ── Borders: alpha steps, not hue shifts ──────────────────────────── */
    --border:        rgba(255, 255, 255, 0.12);
    --border-light:  rgba(255, 255, 255, 0.20);
    --border-faint:  rgba(255, 255, 255, 0.07);
    --glass-border:  rgba(255, 255, 255, 0.12);
    --row-hover:     rgba(168, 238, 43, 0.04);

    /* ── Lime ramp — Blade OS Forest values ────────────────────────────── */
    --lime:        #A8EE2B;     /* primary brand lime */
    --lime-bright: #C5F26B;
    --lime-dim:    #93E01B;
    --lime-dark:   #5AA000;
    --lime-deep:   #3F7700;
    --lime-bloom:  rgba(168, 238, 43, 0.07);
    --lime-glow:   rgba(168, 238, 43, 0.31);
    --lime-gradient: linear-gradient(180deg, #C5F26B 0%, #93E01B 49%, #7DC90F 51%, #5AA000 100%);

    /* Legacy lime-gloss-* aliases — production code references these names.
       Kept as variables so a future palette swap touches only this file. */
    --lime-gloss-top:      var(--lime-bright);
    --lime-gloss-mid:      var(--lime-dim);
    --lime-gloss-mid-dark: #7DC90F;
    --lime-gloss-bottom:   var(--lime);
    --lime-hover:          var(--lime-dark);
    --lime-gradient-btn:   var(--lime-gradient);

    /* Surface name aliases for backward compatibility with code that still
       references --surface, --surface-glass, --surface-muted etc.        */
    --surface:       var(--surface-base);
    --surface-glass: var(--surface-base);
    --surface-muted: var(--surface-deep);
    --surface-hover: var(--surface-raised);
    --card-bg:       var(--surface-base);

    /* Dark-mode-prefixed aliases for any code still using --dark-* names. */
    --dark-bg:            var(--bg);
    --dark-bg-mid:        var(--bg-mid);
    --dark-surface:       var(--surface-base);
    --dark-surface-muted: var(--surface-deep);
    --dark-surface-hover: var(--surface-raised);
    --dark-surface-raised:var(--surface-raised);
    --dark-surface-active:var(--surface-active);
    --dark-glass-top:    var(--glass-top);
    --dark-glass-bottom: var(--glass-bottom);
    --dark-glass-inset:  var(--glass-inset);
    --dark-border:        var(--border);
    --dark-border-light:  var(--border-light);
    --dark-border-faint:  var(--border-faint);
    --dark-text-main:  var(--text-main);
    --dark-text-sub:   var(--text-sub);
    --dark-text-muted: var(--text-muted);
    --dark-text-faint: var(--text-faint);
    --dark-lime:        var(--lime);
    --dark-lime-bright: var(--lime-bright);
    --dark-lime-dim:    var(--lime-dim);
    --dark-lime-dark:   var(--lime-dark);
    --dark-lime-deep:   var(--lime-deep);
    --dark-lime-bloom:  var(--lime-bloom);
    --dark-lime-glow:   var(--lime-glow);
    --dark-lime-gradient: var(--lime-gradient);

    /* ── Status accents — Blade OS values ──────────────────────────────── */
    --green:         #3DD68C;
    --green-light:   rgba(61, 214, 140, 0.13);
    --green-border:  rgba(61, 214, 140, 0.28);

    --blue:          #5BB3FF;
    --blue-light:    rgba(91, 179, 255, 0.13);
    --blue-border:   rgba(91, 179, 255, 0.28);

    --red:           #FF6B6B;
    --red-bright:    #FF6B6B;
    --red-light:     rgba(255, 107, 107, 0.13);
    --red-border:    rgba(255, 107, 107, 0.28);

    --orange:        #FFD060;
    --orange-light:  rgba(255, 208, 96, 0.13);
    --orange-border: rgba(255, 208, 96, 0.28);

    --yellow:        #FFD060;

    --dark-blue:   var(--blue);
    --dark-green:  var(--green);
    --dark-red:    var(--red);
    --dark-yellow: var(--yellow);

    /* ── Status pairs (badges) ─────────────────────────────────────────── */
    --status-applied-bg:   var(--blue-light);
    --status-applied-fg:   var(--blue);
    --status-hired-bg:     var(--green-light);
    --status-hired-fg:     var(--green);
    --status-rejected-bg:  var(--red-light);
    --status-rejected-fg:  var(--red);
    --status-completed-bg: rgba(126, 87, 194, 0.18);
    --status-completed-fg: #B39DDB;
    --status-open-bg:      var(--lime-bloom);
    --status-open-fg:      var(--lime);
    --status-filled-bg:    var(--orange-light);
    --status-filled-fg:    var(--orange);

    /* ── Overlays ──────────────────────────────────────────────────────── */
    --overlay-backdrop: rgba(0, 0, 0, 0.5);

    /* ── Shadows ───────────────────────────────────────────────────────── */
    --shadow-xs:    0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-xl:    0 20px 40px rgba(0, 0, 0, 0.50);
    --shadow-soft:  0 8px 32px rgba(0, 0, 0, 0.30);
    --shadow-modal: 0 25px 50px rgba(0, 0, 0, 0.55);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --shadow-focus: 0 0 0 3px rgba(168, 238, 43, 0.17);
    --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 2px 5px rgba(0, 0, 0, 0.20);
    --shadow-gloss: inset 0 1px 1px rgba(255, 255, 255, 0.10);

    /* ── Blur ──────────────────────────────────────────────────────────── */
    --blur-sm: blur(4px);
    --blur-md: blur(12px);
    --blur-lg: blur(16px);
    --blur-xl: blur(20px);

    /* ── Radii ─────────────────────────────────────────────────────────── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   10px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-3xl:  20px;
    --radius-full: 9999px;

    /* ── Spacing (base-4) ──────────────────────────────────────────────── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
}