/* =========================================================
   JS Jobs Modern Design Tokens
   Scope: #js_jobs_main_wrapper
   Notes: Default theme variables for modern frontend/admin pages.
          Admin theme settings should override these variables later,
          not individual layout rules.
   ========================================================= */
#js_jobs_main_wrapper {
    --jsjobs-primary: #2563eb;
    --jsjobs-primary-hover: #1d4ed8;
    --jsjobs-primary-soft: #eff6ff;
    --jsjobs-primary-subtle: #f4f8ff;
    --jsjobs-on-primary: #ffffff;
    --jsjobs-accent: #22c4f4;

    --jsjobs-text: #0f172a;
    --jsjobs-text-strong: #07111f;
    --jsjobs-muted: #64748b;
    --jsjobs-muted-soft: #94a3b8;

    --jsjobs-surface: #ffffff;
    --jsjobs-surface-soft: #f8fafc;
    --jsjobs-surface-muted: #f1f5f9;
    --jsjobs-border: #dbe7f5;
    --jsjobs-border-soft: #e8f1fb;

    --jsjobs-success: #16a34a;
    --jsjobs-warning: #f59e0b;
    --jsjobs-danger: #dc2626;

    --jsjobs-radius-xs: 8px;
    --jsjobs-radius-sm: 10px;
    --jsjobs-radius-md: 14px;
    --jsjobs-radius-lg: 18px;
    --jsjobs-radius-xl: 22px;
    --jsjobs-radius-pill: 999px;

    --jsjobs-shadow-sm: 0 8px 24px rgba(15, 23, 42, .045);
    --jsjobs-shadow-md: 0 18px 44px rgba(15, 23, 42, .07);
    --jsjobs-shadow-lg: 0 22px 58px rgba(15, 23, 42, .08);
    --jsjobs-focus-ring: 0 0 0 3px rgba(37, 99, 235, .12);

    --jsjobs-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --jsjobs-transition-fast: .16s ease;

    /* Compatibility aliases for older jsjobs-modern.css blocks. */
    --jsjobs-modern-blue: var(--jsjobs-primary);
    --jsjobs-modern-blue-dark: var(--jsjobs-primary-hover);
    --jsjobs-modern-cyan: var(--jsjobs-accent);
    --jsjobs-modern-ink: var(--jsjobs-text);
    --jsjobs-modern-text: #334155;
    --jsjobs-modern-muted: var(--jsjobs-muted);
    --jsjobs-modern-soft: var(--jsjobs-surface-soft);
    --jsjobs-modern-panel: var(--jsjobs-surface-muted);
    --jsjobs-modern-card: var(--jsjobs-surface);
    --jsjobs-modern-border: var(--jsjobs-border);
    --jsjobs-modern-border-soft: var(--jsjobs-border-soft);
    --jsjobs-modern-shadow: var(--jsjobs-shadow-md);

    /* Legacy variable names used by the resume form (forms.css) and other
       migrated blocks. These used to live in css/jsjobs_variables.css; defined
       here so they are always available. The admin theme (jsjobs_variables.css)
       loads AFTER this file and overrides --jsjobs-secondary / --jsjobs-text-dark. */
    --jsjobs-secondary: var(--jsjobs-primary-hover);
    --jsjobs-text-dark: var(--jsjobs-text);
    --jsjobs-card-bg: var(--jsjobs-surface);
    --jsjobs-content-bg: var(--jsjobs-surface-soft);
    --jsjobs-border-color: var(--jsjobs-border);
    --jsjobs-radius: var(--jsjobs-radius-md);
    --jsjobs-body-font-l: 17px;
    --jsjobs-body-font-m: 15px;
    --jsjobs-body-font-s: 13px;
}