frontend/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Ascent AI Design System Variables */
    --surface-base: #FAFAF8;
    --surface-raised: #FFFFFF;
    --surface-overlay: #F0EFEA;
    
    --text-primary: #1A1A18;
    --text-secondary: #6B6B66;
    --text-muted: #9B9B95;
    --text-disabled: #B8B8B3;
    
    --ascent-blue: #2563EB;
    --ascent-blue-hover: #1D4ED8;
    --ascent-blue-subtle: #DBEAFE;
    
    --semantic-error: #DC2626;
    --semantic-warning: #D97706;
    --semantic-success: #2563EB;
    --semantic-error-bg: #FEE2E2;
    --semantic-warning-bg: #FEF3C7;
    --semantic-success-bg: #DBEAFE;
    
    --border-default: #E5E4DF;
    --border-subtle: #F0EFEA;
    --border-strong: #D1D0CC;
    
    /* Typography */
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body:    'Outfit', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    /* Spacing (4px base) */
    --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;
    
    /* Radii */
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
    --radius-xl: 8px; --radius-2xl: 8px; --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);

    /* Legacy page aliases mapped to the interview theme */
    --bg-base: var(--surface-base);
    --bg-elevated: var(--surface-raised);
    --bg-surface: var(--surface-overlay);
    --border-medium: var(--border-strong);
    --success: var(--semantic-success);
    --danger: var(--semantic-error);
    --danger-dark: #991B1B;
    --danger-glow: var(--semantic-error-bg);
    --warning-dark: #92400E;
    --warning-glow: var(--semantic-warning-bg);
    --teal-500: var(--ascent-blue);
    --teal-600: var(--ascent-blue);
    --teal-700: var(--ascent-blue-hover);
    --teal-glow: rgba(37, 99, 235, 0.08);
    --teal-glow-strong: rgba(37, 99, 235, 0.14);
    --success-dark: var(--ascent-blue-hover);
    --success-glow: var(--semantic-success-bg);
    --stone-800: #292926;
    --stone-900: var(--text-primary);
    --z-nav: 50;
    --text-display: clamp(2.25rem, 6vw, 4.5rem);
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;
    --text-4xl: 3rem;
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --ease-out: var(--ease-out-expo);

    /* Easing & Duration */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-reveal: 800ms;

    /* shadcn-ui compatibility */
    --background: 0 0% 98%;
    --foreground: 0 0% 10%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 10%;
    --primary: var(--ascent-blue);
    --primary-foreground: 0 0% 100%;
    --secondary: 210 20% 96%;
    --secondary-foreground: 0 0% 10%;
    --muted: 210 20% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 214 95% 91%;
    --accent-foreground: 221 83% 53%;
    --destructive: 0 84% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 221 83% 53%;
    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-surface-base text-text-primary font-sans antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  html, body, #root {
    min-height: 100%;
  }
  button, input, textarea, select {
    font: inherit;
  }
  img, video, canvas, svg {
    max-width: 100%;
  }
}

@layer components {
  .app-page {
    min-height: 100dvh;
    background: var(--surface-base);
    color: var(--text-primary);
  }

  .app-header {
    border-bottom: 1px solid var(--border-default);
    background: rgba(250, 250, 248, 0.92);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .app-header-inner {
    width: min(100%, 72rem);
    margin: 0 auto;
    min-height: 3.5rem;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
  }

  .app-brand-mark {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 6px;
    background: var(--ascent-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .app-container {
    width: min(100%, 72rem);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) 1.5rem;
  }

  .app-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid rgba(37, 99, 235, 0.18);
    background: rgba(37, 99, 235, 0.08);
    color: var(--ascent-blue-hover);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .app-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
  }
}

@media (max-width: 640px) {
  .app-header-inner,
  .app-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D0CC; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B8B8B3; }

/* Loader Overlay */
.ascent-loader-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-base);
  z-index: 9999;
}

.ascent-loader {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-default);
  border-top-color: var(--ascent-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top: 2px solid currentColor;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}