/* =====================================================
   TalentSync AI — Theme Variables v4.0
   Single light theme — Corporate Modernism palette
   ===================================================== */

:root {
  /* ── Backgrounds ──────────────────────────────────── */
  --bg-page:         #fcf8fa;
  --bg-surface:      #ffffff;
  --bg-surface-low:  #f6f3f5;
  --bg-surface-high: #eae7e9;
  --bg-sidebar:      rgba(255, 255, 255, 0.96);
  --bg-topbar:       rgba(252, 248, 250, 0.97);
  --bg-input:        #f6f3f5;
  --bg-card:         #ffffff;
  --bg-hero:         linear-gradient(135deg, #fcf8fa 0%, #f0edef 45%, #eae7e9 100%);
  --bg-hero-accent:  linear-gradient(135deg, rgba(70, 72, 212, 0.07) 0%, rgba(96, 99, 238, 0.12) 100%);

  /* ── Text ─────────────────────────────────────────── */
  --text-primary:          #1b1b1d;
  --text-secondary:        #45464d;
  --text-muted:            #76777d;
  --text-muted-soft:       #9ea0a7;
  --text-on-brand:         #ffffff;
  --text-hero:             #131b2e;
  --text-hero-muted:       #45464d;
  --text-sidebar-active:   #4648d4;
  --text-sidebar-inactive: #76777d;
  --text-label:            #76777d;
  --text-heading:          #1b1b1d;

  /* ── Brand / Accent ───────────────────────────────── */
  --brand-primary:         #4648d4;
  --brand-secondary:       #6063ee;
  --brand-tertiary:        #7c839b;
  --brand-gradient:        linear-gradient(135deg, #4648d4 0%, #6063ee 55%, #7c7ef8 100%);
  --brand-gradient-soft:   linear-gradient(135deg, #f0edef 0%, #eae7e9 50%, #e4e2e4 100%);
  --brand-cyan:            #4648d4;
  --brand-cyan-bright:     #6063ee;

  /* ── Borders ─────────────────────────────────────── */
  --border-default:  #c6c6cd;
  --border-subtle:   #e4e2e4;
  --border-brand:    rgba(70, 72, 212, 0.18);
  --border-input:    #c6c6cd;
  --border-card:     rgba(70, 72, 212, 0.10);

  /* ── Shadows (premium light, navy-tinted) ─────────── */
  --shadow-card:
    0 1px 2px rgba(27, 27, 29, 0.04),
    0 4px 6px -1px rgba(27, 27, 29, 0.05),
    0 0 32px rgba(70, 72, 212, 0.06);
  --shadow-card-hover:
    0 8px 32px rgba(70, 72, 212, 0.12),
    0 4px 12px rgba(27, 27, 29, 0.06),
    0 0 48px rgba(96, 99, 238, 0.14);
  --shadow-btn:
    0 4px 14px rgba(70, 72, 212, 0.30),
    0 0 24px rgba(96, 99, 238, 0.22);
  --shadow-page:
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-match-ring: 0 0 16px rgba(70, 72, 212, 0.30);
  --shadow-sidebar:    4px 0 24px rgba(70, 72, 212, 0.05);

  /* ── Sidebar ──────────────────────────────────────── */
  --sidebar-active-bg: linear-gradient(90deg, rgba(70, 72, 212, 0.10) 0%, rgba(96, 99, 238, 0.05) 100%);

  /* ── Status Badges ────────────────────────────────── */
  --badge-success-bg:   #ecfdf5;
  --badge-success-text: #047857;
  --badge-info-bg:      #eef0ff;
  --badge-info-text:    #3730c4;
  --badge-warning-bg:   #fffbeb;
  --badge-warning-text: #b45309;
  --badge-error-bg:     #fef2f2;
  --badge-error-text:   #b91c1c;

  /* ── Match Ring ───────────────────────────────────── */
  --ring-fill:     #4648d4;
  --ring-track:    #eae7e9;
  --ring-inner-bg: #ffffff;
  --ring-text:     #4648d4;

  /* ── Glassmorphism ────────────────────────────────── */
  --glass-blur: blur(20px);

  /* ── design-system.css aliases ──────────────────── */
  --color-bg:           var(--bg-page);
  --color-surface:      var(--bg-surface);
  --color-surface-low:  var(--bg-surface-low);
  --color-surface-high: var(--bg-surface-high);
  --color-violet:       var(--brand-primary);
  --color-violet-deep:  #3730c4;
  --color-cyan:         var(--brand-secondary);
  --color-on-surface:   var(--text-primary);
  --color-muted:        var(--text-muted);
  --color-border:       var(--border-default);
  --color-error:        #ba1a1a;

  --glass-bg:           rgba(255, 255, 255, 0.92);
  --glass-bg-heavy:     rgba(255, 255, 255, 0.98);
  --glass-border:       var(--border-brand);
  --glass-border-hover: rgba(70, 72, 212, 0.30);

  --glow-violet:    0 0 40px rgba(70, 72, 212, 0.15);
  --glow-violet-sm: 0 0 20px rgba(70, 72, 212, 0.12);
  --glow-cyan:      0 0 32px rgba(96, 99, 238, 0.12);

  color-scheme: light;
}

/* =====================================================
   Tailwind semantic tokens (Material 3 light mapping)
   ===================================================== */
:root {
  --tw-background:                var(--bg-page);
  --tw-on-background:             var(--text-primary);

  --tw-primary:                   #000000;
  --tw-on-primary:                #ffffff;
  --tw-primary-container:         #131b2e;
  --tw-on-primary-container:      #7c839b;
  --tw-primary-fixed:             #dae2fd;
  --tw-primary-fixed-dim:         #bec6e0;
  --tw-on-primary-fixed:          #131b2e;
  --tw-on-primary-fixed-variant:  #3f465c;
  --tw-inverse-primary:           #bec6e0;

  --tw-secondary:                 var(--brand-primary);
  --tw-on-secondary:              #ffffff;
  --tw-secondary-container:       #6063ee;
  --tw-on-secondary-container:    #fffbff;
  --tw-secondary-fixed:           #e1e0ff;
  --tw-secondary-fixed-dim:       #c0c1ff;
  --tw-on-secondary-fixed:        #07006c;
  --tw-on-secondary-fixed-variant:#2f2ebe;

  --tw-tertiary:                  #4648d4;
  --tw-on-tertiary:               #ffffff;
  --tw-tertiary-container:        #271901;
  --tw-on-tertiary-container:     #98805d;
  --tw-tertiary-fixed:            #fcdeb5;
  --tw-tertiary-fixed-dim:        #dec29a;
  --tw-on-tertiary-fixed:         #271901;
  --tw-on-tertiary-fixed-variant: #574425;

  --tw-surface:                   var(--bg-surface);
  --tw-surface-dim:               #dcd9db;
  --tw-surface-bright:            #fcf8fa;
  --tw-surface-variant:           #e4e2e4;
  --tw-surface-container-lowest:  #ffffff;
  --tw-surface-container-low:     #f6f3f5;
  --tw-surface-container:         #f0edef;
  --tw-surface-container-high:    #eae7e9;
  --tw-surface-container-highest: #e4e2e4;
  --tw-on-surface:                var(--text-primary);
  --tw-on-surface-variant:        var(--text-muted);
  --tw-inverse-surface:           #303032;
  --tw-inverse-on-surface:        #f3f0f2;
  --tw-surface-tint:              #565e74;

  --tw-outline:                   #76777d;
  --tw-outline-variant:           #c6c6cd;

  --tw-error:                     #ba1a1a;
  --tw-on-error:                  #ffffff;
  --tw-error-container:           #ffdad6;
  --tw-on-error-container:        #93000a;

  --tw-accent-cyan:               var(--brand-secondary);
}