/* ============================================================
   PhD Sky — Foundation tokens (colors + type)
   Dark scientific terminal aesthetic.
   Fonts: Fira Code (mono) + Fira Sans (display/body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* ── Type families ─────────────────────────────────────── */
    --font-mono:    'Fira Code', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-display: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:    'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ── Type scale (display) ──────────────────────────────── */
    --fs-display-xl: 56px;   /* hero on landing-style pages */
    --fs-display-lg: 40px;   /* page H1 */
    --fs-display-md: 28px;   /* section header */
    --fs-h1: 24px;
    --fs-h2: 20px;
    --fs-h3: 16px;
    --fs-body: 14px;
    --fs-body-lg: 16px;
    --fs-small: 13px;
    --fs-xs: 12px;
    --fs-micro: 11px;        /* badge / label */
    --fs-nano: 10px;         /* aggregator chip */

    /* ── Mono sizes (terminal voice) ───────────────────────── */
    --fs-mono-prompt: 24px;  /* > PhD_Positions title */
    --fs-mono-label:  11px;  /* uppercase filter labels */
    --fs-mono-meta:   12px;  /* card meta */
    --fs-mono-code:   13px;  /* search input, badges */

    /* ── Line heights ──────────────────────────────────────── */
    --lh-tight: 1.2;
    --lh-snug:  1.4;
    --lh-base:  1.5;
    --lh-relaxed: 1.6;

    /* ── Letter-spacing ────────────────────────────────────── */
    --ls-tight:  -0.02em;
    --ls-normal:  0;
    --ls-wide:    0.03em;
    --ls-uppercase: 0.05em;
    --ls-extreme:   0.08em;

    /* ── Weights ───────────────────────────────────────────── */
    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ============================================================
       COLORS — slate / cobalt / amber
       ============================================================ */

    /* Foundational neutral scale (slate) */
    --slate-950: #020617;
    --slate-900: #0f172a;   /* page bg */
    --slate-850: #172033;
    --slate-800: #1e293b;   /* card / surface */
    --slate-700: #334155;   /* border */
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #a8b8c8;
    --slate-200: #cbd5e1;
    --slate-100: #e2e8f0;   /* primary text */
    --slate-50:  #f1f5f9;

    /* Brand — cobalt blue (terminal prompt & primary action) */
    --blue-700: #1d4ed8;
    --blue-600: #2563eb;
    --blue-500: #3b82f6;     /* primary */
    --blue-400: #60a5fa;     /* terminal accent */
    --blue-300: #93c5fd;
    --blue-200: #bfdbfe;

    /* Accent — signal amber (terminal cursor / warning) */
    --amber-600: #d97706;
    --amber-500: #f59e0b;    /* accent */
    --amber-400: #fbbf24;
    --amber-300: #fcd34d;

    /* Violet — used in the AI badge gradient */
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;

    /* Semantic state */
    --green-600:  #059669;   /* country chip / success */
    --green-700:  #047857;
    --red-500:    #ef4444;
    --red-600:    #dc2626;
    --red-900-30: rgba(127, 29, 29, 0.3);

    /* ── Semantic surface tokens ───────────────────────────── */
    --bg:           var(--slate-900);
    --bg-elevated:  var(--slate-800);
    --bg-card:      var(--slate-800);
    --bg-deep:      var(--slate-950);
    --bg-input:     var(--slate-900);
    --border:       var(--slate-700);
    --border-strong: var(--slate-600);

    --fg:           var(--slate-100);
    --fg-muted:     var(--slate-300);
    --fg-subtle:    var(--slate-400);
    --fg-inverse:   var(--slate-50);

    --primary:      var(--blue-500);
    --primary-hover: var(--blue-600);
    --primary-active: var(--blue-700);
    --primary-glow: rgba(59, 130, 246, 0.15);

    --accent:       var(--amber-500);
    --accent-hover: var(--amber-400);

    --link:         var(--blue-500);
    --link-hover:   var(--amber-500);

    /* ── Discipline colors (badge palette) ─────────────────── */
    --disc-biology:        #16a34a;
    --disc-ecology:        #15803d;
    --disc-cs:             #6d28d9;
    --disc-physics:        #0284c7;
    --disc-chemistry:      #0891b2;
    --disc-medicine:       #dc2626;
    --disc-mathematics:    #7c3aed;
    --disc-economics:      #b45309;
    --disc-sociology:      #0369a1;
    --disc-engineering:    #c2410c;
    --disc-environment:    #15803d;
    --disc-psychology:     #be185d;
    --disc-neuroscience:   #7c3aed;
    --disc-history:        #92400e;
    --disc-arts:           #a21caf;
    --disc-general:        #475569;

    --pos-type-bg:         #c2410c;   /* position-type chip — terracotta */
    --country-bg:          #059669;   /* country chip — emerald */
    --aggregator-bg:       #475569;

    /* ── Spacing scale (8pt grid + 4pt half-steps) ─────────── */
    --space-0:  0;
    --space-1:  2px;
    --space-2:  4px;
    --space-3:  6px;
    --space-4:  8px;
    --space-5:  12px;
    --space-6:  16px;
    --space-7:  20px;
    --space-8:  24px;
    --space-9:  32px;
    --space-10: 40px;
    --space-11: 48px;
    --space-12: 64px;

    /* ── Radii ─────────────────────────────────────────────── */
    --r-xs: 3px;       /* badge-toggle */
    --r-sm: 4px;       /* badge */
    --r-md: 6px;       /* button / input */
    --r-lg: 8px;       /* card / search-bar */
    --r-xl: 12px;
    --r-pill: 9999px;  /* AI badge / switch */

    /* ── Shadows ───────────────────────────────────────────── */
    --shadow-sm:    0 1px 0 rgba(59, 130, 246, 0.15);                /* header rule */
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.5);                   /* dropdown */
    --shadow-xl:    0 8px 32px rgba(0, 0, 0, 0.5);                   /* search focus */
    --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.15);
    --shadow-inset-thumb: 0 1px 3px rgba(0,0,0,0.3);                 /* switch thumb */

    /* ── Transitions ───────────────────────────────────────── */
    --t-fast:  0.15s ease;
    --t-base:  0.2s ease;
    --t-slow:  0.3s ease;

    /* ── Z-index ───────────────────────────────────────────── */
    --z-dropdown: 100;
    --z-sticky-footer: 50;
    --z-search-expanded: 20;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-display);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
}

h1 {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-prompt);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--fg);
    line-height: var(--lh-tight);
}

h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}

h3 {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}

p {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--fg);
}

code, kbd, pre, .mono {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-code);
}

a {
    color: var(--link);
    text-decoration: none;
    transition: color var(--t-base);
}

a:hover {
    color: var(--link-hover);
}

/* terminal prompt prefix — a brand signature  */
.t-prompt::before {
    content: '>';
    color: var(--blue-400);
    margin-right: var(--space-4);
    font-weight: var(--fw-bold);
}

.t-cursor::after {
    content: '_';
    color: var(--accent);
    animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* uppercase mono label — the brand's quiet workhorse */
.t-label {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-label);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-extreme);
    color: var(--fg-muted);
}