/* ==========================================================================
   CertBoost — Design Tokens
   Source of truth for color, radius, shadow, type, spacing, and motion.
   All new components use these. Existing pbmit styles are untouched.
   ========================================================================== */

:root {
    /* Brand palette (preserves the slate+blue+violet identity already in use) */
    --cb-slate-950: #0b1220;
    --cb-slate-900: #0f172a;
    --cb-slate-800: #1e293b;
    --cb-slate-700: #334155;
    --cb-slate-600: #475569;
    --cb-slate-500: #64748b;
    --cb-slate-400: #94a3b8;
    --cb-slate-300: #cbd5e1;
    --cb-slate-200: #e2e8f0;
    --cb-slate-100: #f1f5f9;
    --cb-slate-50:  #f8fafc;

    --cb-blue-700:   #1d4ed8;
    --cb-blue-600:   #2563eb; /* primary CTA */
    --cb-blue-500:   #3b82f6;
    --cb-blue-400:   #60a5fa;
    --cb-blue-100:   #dbeafe;
    --cb-blue-50:    #eff6ff;

    --cb-violet-600: #7c3aed;
    --cb-violet-500: #8b5cf6; /* accent / gradient-end */
    --cb-violet-100: #ede9fe;

    --cb-green-600:  #059669;
    --cb-green-500:  #10b981;
    --cb-green-100:  #d1fae5;
    --cb-green-50:   #ecfdf5;

    --cb-amber-500:  #f59e0b; /* warning / premium tier */
    --cb-amber-100:  #fef3c7;

    --cb-red-600:    #dc2626;
    --cb-red-500:    #ef4444;
    --cb-red-100:    #fee2e2;
    --cb-red-50:     #fef2f2;

    /* Semantic aliases */
    --cb-text-strong:  var(--cb-slate-900);
    --cb-text:         var(--cb-slate-800);
    --cb-text-muted:   var(--cb-slate-500);
    --cb-text-faint:   var(--cb-slate-400);
    --cb-text-invert:  #ffffff;

    --cb-bg:           #ffffff;
    --cb-bg-subtle:    var(--cb-slate-50);
    --cb-bg-mute:      var(--cb-slate-100);
    --cb-border:       var(--cb-slate-200);
    --cb-border-soft:  var(--cb-slate-100);

    --cb-primary:      var(--cb-blue-600);
    --cb-primary-hover:var(--cb-blue-700);

    /* Signature gradient used throughout the authorized area */
    --cb-grad-hero:    linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    --cb-grad-primary: linear-gradient(135deg, var(--cb-blue-500), var(--cb-violet-500));
    --cb-grad-soft:    linear-gradient(135deg, #eff6ff, #f0f9ff);

    /* Radius */
    --cb-r-xs: 4px;
    --cb-r-sm: 6px;
    --cb-r-md: 10px;
    --cb-r-lg: 14px;
    --cb-r-xl: 20px;
    --cb-r-pill: 999px;

    /* Elevation (4 steps) */
    --cb-e1: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
    --cb-e2: 0 2px 12px rgba(15,23,42,.06);
    --cb-e3: 0 12px 28px rgba(15,23,42,.10);
    --cb-e4: 0 24px 60px rgba(15,23,42,.14);

    /* Type scale (fluid) */
    --cb-t-xs:   clamp(.72rem, .70rem + .10vw, .78rem);
    --cb-t-sm:   clamp(.82rem, .80rem + .10vw, .88rem);
    --cb-t-base: clamp(.95rem, .92rem + .15vw, 1.02rem);
    --cb-t-lg:   clamp(1.10rem, 1.04rem + .30vw, 1.25rem);
    --cb-t-xl:   clamp(1.35rem, 1.22rem + .50vw, 1.60rem);
    --cb-t-2xl:  clamp(1.80rem, 1.60rem + .90vw, 2.40rem);
    --cb-t-3xl:  clamp(2.40rem, 2.00rem + 1.5vw, 3.40rem);

    /* Spacing (4-pt) */
    --cb-s-1: 4px;  --cb-s-2: 8px;   --cb-s-3: 12px; --cb-s-4: 16px;
    --cb-s-5: 24px; --cb-s-6: 32px;  --cb-s-8: 48px; --cb-s-10: 64px;
    --cb-s-12: 80px; --cb-s-16: 112px;

    /* Motion */
    --cb-ease:       cubic-bezier(.2,.8,.2,1);
    --cb-dur-fast:   120ms;
    --cb-dur:        180ms;
    --cb-dur-slow:   260ms;

    /* Focus ring (always 3px @ blue/30) */
    --cb-ring: 0 0 0 3px rgba(59,130,246,.30);

    /* Container */
    --cb-container-max: 1280px;
    --cb-gutter: 24px;

    /* Font families */
    --cb-font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --cb-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --cb-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Apply Inter ONLY inside .cb scopes and to our slim page header so we don't
   disturb the rest of the pbmit theme elsewhere. */
.cb, .cb * { font-family: var(--cb-font-ui); }
.cb-page-header, .cb-page-header * { font-family: var(--cb-font-ui); }
code, pre, kbd, samp, .cb-mono { font-family: var(--cb-font-mono); }

/* Dark-mode ready (opt-in via html.cb-dark). Safe to ignore until you flip it on. */
html.cb-dark {
    --cb-bg:          #0b1220;
    --cb-bg-subtle:   #0f172a;
    --cb-bg-mute:     #1e293b;
    --cb-text-strong: #f8fafc;
    --cb-text:        #e2e8f0;
    --cb-text-muted:  #94a3b8;
    --cb-border:      #1e293b;
    --cb-border-soft: #334155;
    color-scheme: dark;
}

/* Dark-mode coverage for pbmit/bootstrap surfaces so the whole public site
   respects the user preference, not just .cb-scoped components. */
html.cb-dark body {
    background: var(--cb-bg) !important;
    color: var(--cb-text);
}
html.cb-dark .page-content,
html.cb-dark .page-wrapper,
html.cb-dark .section-lg,
html.cb-dark section:not(.cb-section--dark):not(.cb-page-header) {
    background-color: transparent;
    color: var(--cb-text);
}
html.cb-dark p,
html.cb-dark li,
html.cb-dark td,
html.cb-dark .pbmit-title,
html.cb-dark .pbmit-subtitle,
html.cb-dark h1, html.cb-dark h2, html.cb-dark h3,
html.cb-dark h4, html.cb-dark h5, html.cb-dark h6 {
    color: var(--cb-text-strong);
}
html.cb-dark .cb-card,
html.cb-dark .cb-kpi,
html.cb-dark .cb-feat,
html.cb-dark .cb-plan {
    background: var(--cb-bg-subtle);
    border-color: var(--cb-border-soft);
}
html.cb-dark .cb-card__foot { background: var(--cb-bg-mute); }
html.cb-dark .cb-btn--secondary { background: var(--cb-bg-mute); color: var(--cb-text-strong); }
html.cb-dark .cb-btn--ghost { color: var(--cb-text-strong); border-color: var(--cb-border-soft); }
html.cb-dark .cb-field > input,
html.cb-dark .cb-field > select,
html.cb-dark .cb-field > textarea {
    background: var(--cb-bg-subtle);
    color: var(--cb-text-strong);
    border-color: var(--cb-border-soft);
}
html.cb-dark footer.footer,
html.cb-dark .pbmit-footer-widget-area-top,
html.cb-dark .pbmit-footer-widget-area,
html.cb-dark .pbmit-footer-bottom { background: var(--cb-bg-subtle) !important; color: var(--cb-text); }

/* Respect reduced motion globally for CB components */
@media (prefers-reduced-motion: reduce) {
    :root {
        --cb-dur-fast: 0ms;
        --cb-dur: 0ms;
        --cb-dur-slow: 0ms;
    }
    .cb * { animation: none !important; transition: none !important; }
}