/* ============================================================
   OmniResume — Design Tokens
   ============================================================ */

:root {
  /* ========== BRAND COLORS ========== */
  --color-brand-50:  #EFF6FF;
  --color-brand-100: #DBEAFE;
  --color-brand-200: #BFDBFE;
  --color-brand-300: #93C5FD;
  --color-brand-400: #60A5FA;
  --color-brand-500: #3B82F6;
  --color-brand-600: #1F6FEB;
  --color-brand-700: #1D4ED8;
  --color-brand-800: #1E40AF;
  --color-brand-900: #1E3A8A;
  --color-brand-950: #172554;

  /* ========== ACCENT ========== */
  --color-accent-400: #FBBF24;
  --color-accent-500: #F59E0B;
  --color-accent-600: #D97706;

  /* ========== NEUTRALS ========== */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;
  --color-neutral-950: #020617;

  /* ========== SEMANTIC ========== */
  --color-success-50:  #ECFDF5;
  --color-success-500: #10B981;
  --color-success-700: #047857;
  --color-warning-50:  #FFFBEB;
  --color-warning-500: #F59E0B;
  --color-warning-700: #B45309;
  --color-danger-50:   #FEF2F2;
  --color-danger-500:  #EF4444;
  --color-danger-700:  #B91C1C;
  --color-info-50:     #EFF6FF;
  --color-info-500:    #3B82F6;
  --color-info-700:    #1D4ED8;

  /* ========== SEMANTIC ALIASES (LIGHT) ========== */
  --color-bg:            #FFFFFF;
  --color-bg-subtle:     #F8FAFC;
  --color-bg-muted:      #F1F5F9;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F8FAFC;
  --color-border:        #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-text:          #0F172A;
  --color-text-muted:    #475569;
  --color-text-subtle:   #64748B;
  --color-text-inverse:  #FFFFFF;
  --color-focus:         #1F6FEB;

  --color-primary:        #1F6FEB;
  --color-primary-hover:  #1D4ED8;
  --color-primary-active: #1E40AF;
  --color-on-primary:     #FFFFFF;

  /* ========== TYPOGRAPHY ========== */
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ========== SPACING ========== */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ========== RADII ========== */
  --radius-none: 0;
  --radius-xs:   0.25rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-3xl:  2rem;
  --radius-full: 9999px;

  /* ========== SHADOWS ========== */
  --shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
  --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.20);
  --shadow-brand: 0 10px 30px -10px rgba(31, 111, 235, 0.35);
  --shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* ========== TRANSITIONS ========== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
  --duration-slower: 500ms;

  /* ========== Z-INDEX ========== */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-popover:  600;
  --z-toast:    700;
  --z-tooltip:  800;
  --z-max:      9999;

  /* ========== LAYOUT ========== */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-max: 1280px;

  --header-height: 64px;

  /* ========== BORDERS ========== */
  --border-width:   1px;
  --border-width-2: 2px;

  /* ========== MISC ========== */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
}

/* ========== DARK THEME ========== */
[data-theme="dark"] {
  --color-bg:            #0B1220;
  --color-bg-subtle:     #0F172A;
  --color-bg-muted:      #131C31;
  --color-surface:       #0F172A;
  --color-surface-2:     #131C31;
  --color-border:        #1E293B;
  --color-border-strong: #334155;
  --color-text:          #F1F5F9;
  --color-text-muted:    #CBD5E1;
  --color-text-subtle:   #94A3B8;
  --color-text-inverse:  #0F172A;
  --color-focus:         #60A5FA;

  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  --shadow-brand: 0 10px 30px -10px rgba(31, 111, 235, 0.5);
}

@media (prefers-contrast: more) {
  :root {
    --color-border: var(--color-neutral-400);
    --color-text-muted: var(--color-neutral-700);
  }
}