/* ═══════════════════════════════════════════════════════════════════════
   Profine — base.css (Design Tokens, Reset, Base)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
    /* ── Grayscale (Onyx) ──────────────────────────────────────────────── */
    --slate-950: #09090b; --slate-925: #0c0c0f; --slate-900: #18181b;
    --slate-875: #1f1f23; --slate-800: #27272a; --slate-750: #303033;
    --slate-700: #3f3f46; --slate-600: #52525b; --slate-500: #71717a;
    --slate-400: #a1a1aa; --slate-300: #d4d4d8; --slate-200: #e4e4e7;
    --slate-150: #ececef; --slate-100: #f4f4f5; --slate-50:  #fafafa;

    /* ── Primary Accent (Cobalt) ───────────────────────────────────────── */
    --accent-900: #1e3a8a; --accent-800: #1e40af; --accent-700: #1d4ed8;
    --accent-600: #2563eb; --accent-500: #3b82f6; --accent-400: #60a5fa;
    --accent-300: #93bbfd; --accent-200: #bfdbfe; --accent-100: #dbeafe;
    --accent-50:  #eff6ff;
    --accent-primary: #2563eb; --accent-hover: #1d4ed8;
    --accent-light: var(--accent-50); --accent-ring: rgba(37, 99, 235, .18);

    /* ── Legacy Indigo Aliases (backward compat) ───────────────────────── */
    --indigo-900: var(--accent-900); --indigo-700: var(--accent-700);
    --indigo-600: var(--accent-600); --indigo-500: var(--accent-500);
    --indigo-400: var(--accent-400); --indigo-300: var(--accent-300);
    --indigo-200: var(--accent-200); --indigo-100: var(--accent-100);
    --indigo-50:  var(--accent-50);

    /* ── Semantics ─────────────────────────────────────────────────────── */
    --color-success: #16a34a; --color-success-bg: #f0fdf4; --color-success-text: #15803d;
    --color-warn: #d97706; --color-warn-bg: #fffbeb; --color-warn-text: #b45309;
    --color-danger: #dc2626; --color-danger-bg: #fef2f2; --color-danger-text: #b91c1c;
    --color-info: #2563eb; --color-info-bg: #eff6ff; --color-info-text: #1d4ed8;

    /* ── Functional Mappings ───────────────────────────────────────────── */
    --bg-body: var(--slate-50); --bg-base: var(--slate-50);
    --bg-surface: #ffffff; --bg-surface-hover: var(--slate-50);
    --bg-surface-active: var(--slate-100); --bg-sidebar: var(--slate-950);
    --bg-overlay: rgba(9, 9, 11, 0.7);
    --surface-elevated: #ffffff;
    --border-soft: var(--slate-200); --border-strong: var(--slate-300);
    --border-medium: var(--slate-300);
    --text-primary: var(--slate-900); --text-secondary: var(--slate-600);
    --text-muted: var(--slate-400);
    --accent: var(--accent-primary);

    /* ── Typography Hierarchy ──────────────────────────────────────────── */
    --fs-xxxs: 10px; --fs-xxs: 11px; --fs-xs: 12px; --fs-sm: 14px;
    --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px;
    --fs-3xl: 30px; --fs-4xl: 36px; --fs-5xl: 48px;
    --lh-extra-tight: 1.1; --lh-tight: 1.25; --lh-snug: 1.375;
    --lh-normal: 1.5; --lh-relaxed: 1.625; --lh-loose: 1.75;
    --lh-extra-loose: 2;
    --fw-extra-light: 200; --fw-light: 300; --fw-regular: 400;
    --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
    --fw-extra-bold: 800; --fw-black: 900;

    /* ── Font Stacks ───────────────────────────────────────────────────── */
    --font-display: 'Syne', 'Manrope', system-ui, sans-serif;
    --font-body: 'Manrope', system-ui, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ── Spacing & Grid ────────────────────────────────────────────────── */
    --space-xxxxs: 2px; --space-xxxs: 4px; --space-xxs: 6px;
    --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
    --space-lg: 24px; --space-xl: 32px; --space-2xl: 40px;
    --space-3xl: 48px; --space-4xl: 64px; --space-5xl: 80px;
    --space-6xl: 96px;
    --grid-gap: var(--space-md);

    /* ── Layout ─────────────────────────────────────────────────────────── */
    --navbar-h: 60px; --sidebar-w: 316px;

    /* ── Border Radius ─────────────────────────────────────────────────── */
    --r-xxs: 2px; --r-xs: 3px; --r-sm: 5px; --r-md: 8px;
    --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-3xl: 24px;
    --r-full: 9999px;

    /* ── Shadows ────────────────────────────────────────────────────────── */
    --shadow-xxs: 0 1px 1px rgba(9, 9, 11, .03);
    --shadow-xs: 0 1px 2px rgba(9, 9, 11, .05);
    --shadow-sm: 0 1px 3px rgba(9, 9, 11, .08), 0 1px 2px rgba(9, 9, 11, .04);
    --shadow-md: 0 4px 12px rgba(9, 9, 11, .08), 0 2px 4px rgba(9, 9, 11, .04);
    --shadow-lg: 0 10px 30px rgba(9, 9, 11, .10), 0 4px 8px rgba(9, 9, 11, .05);
    --shadow-xl: 0 20px 50px rgba(9, 9, 11, .12), 0 8px 16px rgba(9, 9, 11, .06);
    --shadow-2xl: 0 25px 60px rgba(9, 9, 11, .16);
    --shadow-3xl: 0 35px 80px rgba(9, 9, 11, .20);
    --shadow-primary: 0 4px 20px rgba(37, 99, 235, .28);
    --shadow-indigo: var(--shadow-primary);

    /* ── Transitions ───────────────────────────────────────────────────── */
    --t-extra-fast: 60ms ease; --t-fast: 90ms ease;
    --t-base: 160ms ease; --t-slow: 300ms cubic-bezier(.4, 0, .2, 1);
    --t-spring: 400ms cubic-bezier(.34, 1.56, .64, 1);
    --t-ease-out: cubic-bezier(0, 0, .2, 1);
    --transition-default: all 160ms ease;

    /* ── Z-Index Stack ─────────────────────────────────────────────────── */
    --z-dropdown: 50; --z-sticky: 60; --z-fixed: 70;
    --z-sidebar: 80; --z-modal-backdrop: 90; --z-modal: 100;
    --z-popover: 110; --z-tooltip: 120; --z-toast: 9999;

    /* ── Breakpoints (reference only — use in media queries) ───────────── */
    --breakpoint-xs: 380px; --breakpoint-sm: 640px;
    --breakpoint-md: 768px; --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px;
    --breakpoint-3xl: 1920px;

    /* ── Accessibility ─────────────────────────────────────────────────── */
    --focus-ring-width: 2px; --focus-ring-offset: 2px;
    --focus-ring-color: var(--accent-primary);
    --focus-ring-inset: 0 0 0 2px var(--accent-primary);
    --scrollbar-width: 5px;

    /* ── Resume-Specific Tokens ────────────────────────────────────────── */
    --resume-subtitle-fs: 10pt; --resume-loose-lh: 1.7;
    --resume-section-gap: 18pt;
}

/* ─── RESET & BASE ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-size: 16px; }
body { font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-primary); background: var(--bg-body); min-height: 100vh; display: flex; flex-direction: column; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.012'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; transition: var(--transition-default); }
select, textarea, input { font-family: var(--font-body); transition: border-color var(--t-base), box-shadow var(--t-base); }
::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--r-sm); }
::selection { background: var(--accent-100); color: var(--accent-900); }
.hidden { display: none !important; }