/* ==========================================================
   AISHA DESIGN TOKENS — TWO-LAYER SYSTEM
   Layer 1: Brand tokens (theme-independent)
   Layer 2: Semantic tokens (swap with theme)
   ========================================================== */
:root {
  /* === LAYER 1 · BRAND (constant) === */
  --aisha-cyan-300: #4DE3FF;
  --aisha-cyan-400: #00D4FF;
  --aisha-cyan-500: #00B8E6;
  --aisha-cyan-600: #0093B8;
  --aisha-cyan-700: #006A85;

  --stage-new:        #5B8DEF;
  --stage-screening:  #9B6FFF;
  --stage-shortlist:  #00C2D7;
  --stage-interview:  #00D4FF;
  --stage-assessment: #FFB627;
  --stage-offer:      #FF8A3D;
  --stage-accepted:   #00E39A;
  --stage-rejected:   #FF4D6D;
  --stage-onboard:    #19D3A2;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;
  --space-12:48px;--space-16:64px;--space-20:80px;

  --radius-xs:4px;--radius-sm:6px;--radius-md:10px;
  --radius-lg:14px;--radius-xl:20px;--radius-pill:999px;

  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-serif: 'IBM Plex Serif', Georgia, serif;

  --text-xs: 9px;
  --text-sm: 11px;
  --text-base: 12px;
  --text-md: 13px;
  --text-lg: 14px;
  --text-xl: 16px;
  --text-2xl: 20px;
  --text-3xl: 26px;
  --text-4xl: 34px;
  --text-display: 48px;

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --duration-fast:120ms;--duration-base:200ms;--duration-slow:320ms;
}

/* === DARK THEME (default) === */
[data-theme="dark"] {
  --bg-card-rgb:        17, 24, 39;
  --surface-app:        #0a0f1c;
  --surface-sidebar:    rgba(2,6,23,0.65);
  --surface-card:       #111827;
  --surface-raised:     #1e293b;
  --surface-input:      #1e293b;
  --surface-overlay:    rgba(10,22,40,0.7);
  --surface-hover:      rgba(255,255,255,0.04);

  --text-primary:    #f1f5f9;
  --text-secondary:  #cbd5e1;
  --text-tertiary:   #94a3b8;
  --text-disabled:   #64748b;
  --text-on-accent:  #0a0f1c;

  --border-soft:    rgba(255,255,255,0.05);
  --border-medium:  rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);
  --border-accent:  rgba(0,212,255,0.45);

  --accent:         var(--aisha-cyan-400);
  --accent-hover:   var(--aisha-cyan-300);
  --accent-pressed: var(--aisha-cyan-500);
  --accent-glow:    rgba(0,212,255,0.18);
  --accent-soft:    rgba(0,212,255,0.10);

  --success:#00E39A;--warning:#FFB627;--danger:#FF4D6D;--info:#5B8DEF;
  --success-soft:rgba(0,227,154,0.14);--warning-soft:rgba(255,182,39,0.14);
  --danger-soft:rgba(255,77,109,0.14);--info-soft:rgba(91,141,239,0.14);

  --shadow-sm:0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:0 4px 12px rgba(0,0,0,0.35),0 1px 2px rgba(0,0,0,0.20);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.45),0 2px 6px rgba(0,0,0,0.25);
  --shadow-glow:0 0 0 1px var(--border-accent),0 0 24px var(--accent-glow);

  --bg-gradient:
    radial-gradient(ellipse 1200px 600px at 80% -10%,rgba(0,212,255,0.08),transparent 60%),
    radial-gradient(ellipse 800px 400px at 0% 100%,rgba(91,141,239,0.06),transparent 60%);

  --code-bg:#0E1B33;
  --sidebar-blur:blur(20px);
  --header-blur:blur(20px);
  --header-border:rgba(255,255,255,0.06);
  color-scheme: dark;
}

/* === LIGHT THEME === */
[data-theme="light"] {
  --bg-card-rgb:        255, 255, 255;
  --surface-app:        #F4F7FB;
  --surface-sidebar:    #FFFFFF;
  --surface-card:       #FFFFFF;
  --surface-raised:     #FFFFFF;
  --surface-input:      #FFFFFF;
  --surface-overlay:    rgba(10,22,40,0.35);
  --surface-hover:      rgba(10,22,40,0.04);

  --text-primary:    #0F172A;
  --text-secondary:  #334155;
  --text-tertiary:   #64748B;
  --text-disabled:   #94A3B8;
  --text-on-accent:  #FFFFFF;

  --border-soft:    rgba(10,22,40,0.06);
  --border-medium:  rgba(10,22,40,0.12);
  --border-strong:  rgba(10,22,40,0.20);
  --border-accent:  rgba(0,147,184,0.40);

  --accent:         var(--aisha-cyan-600);
  --accent-hover:   var(--aisha-cyan-500);
  --accent-pressed: var(--aisha-cyan-700);
  --accent-glow:    rgba(0,147,184,0.16);
  --accent-soft:    rgba(0,147,184,0.08);

  --success:#00856A;--warning:#A16800;--danger:#C13050;--info:#3563BD;
  --success-soft:rgba(0,133,106,0.10);--warning-soft:rgba(161,104,0,0.10);
  --danger-soft:rgba(193,48,80,0.10);--info-soft:rgba(53,99,189,0.10);

  --shadow-sm:0 1px 3px rgba(10,22,40,0.06);
  --shadow-md:0 4px 14px rgba(10,22,40,0.08),0 1px 3px rgba(10,22,40,0.04);
  --shadow-lg:0 16px 48px rgba(10,22,40,0.12),0 2px 8px rgba(10,22,40,0.06);
  --shadow-glow:0 0 0 1px var(--border-accent),0 0 20px var(--accent-glow);

  --bg-gradient:
    radial-gradient(ellipse 1200px 600px at 80% -10%,rgba(0,147,184,0.06),transparent 60%),
    radial-gradient(ellipse 800px 400px at 0% 100%,rgba(53,99,189,0.04),transparent 60%);

  --code-bg:#F0F3F8;
  --sidebar-blur:none;
  --header-blur:blur(12px);
  --header-border:rgba(10,22,40,0.06);
  color-scheme: light;
}

/* ==========================================================
   BASE
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

body {
  font-family:var(--font-sans);font-size:var(--text-base);
  color:var(--text-primary);
  background:var(--surface-app);
  background-image:var(--bg-gradient);
  background-attachment:fixed;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.005em;
  transition:background-color var(--duration-base) var(--ease-out),
             color var(--duration-base) var(--ease-out);
}

::selection{background:var(--accent-glow);color:var(--text-primary)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--surface-app)}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-pill);border:2px solid var(--surface-app)}
::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}