/* Omni Resume — design tokens
   Single source of truth for color, type scale, spacing, radii, shadows, motion.
   Never hard-code these values in component CSS — reference tokens instead. */

:root {
  /* ---------- Brand color system ---------- */
  --color-primary-50:  #eef4ff;
  --color-primary-100: #dbe7ff;
  --color-primary-200: #bcd3ff;
  --color-primary-300: #8fb3ff;
  --color-primary-400: #5b8bff;
  --color-primary-500: #2f66f5;
  --color-primary-600: #1f4dd6;
  --color-primary-700: #1a3ea8;
  --color-primary-800: #173584;
  --color-primary-900: #152e69;

  --color-secondary-50:  #f2f7f6;
  --color-secondary-100: #dceceb;
  --color-secondary-200: #bcd9d8;
  --color-secondary-300: #8ec0be;
  --color-secondary-400: #5aa19f;
  --color-secondary-500: #3c8684;
  --color-secondary-600: #2d6c6b;
  --color-secondary-700: #265757;
  --color-secondary-800: #214646;
  --color-secondary-900: #1e3a3a;

  --color-neutral-0:   #ffffff;
  --color-neutral-25:  #fcfcfd;
  --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: #060b17;

  --color-success-500: #16a34a;
  --color-success-600: #15803d;
  --color-warning-500: #d97706;
  --color-warning-600: #b45309;
  --color-danger-500:  #dc2626;
  --color-danger-600:  #b91c1c;
  --color-info-500:    #0284c7;
  --color-info-600:    #0369a1;

  /* ---------- Semantic color roles (light theme) ---------- */
  --color-background:      var(--color-neutral-50);
  --color-surface:         var(--color-neutral-0);
  --color-surface-alt:     var(--color-neutral-100);
  --color-surface-raised:  var(--color-neutral-0);
  --color-overlay:         rgb(15 23 42 / 0.55);

  --color-text:            var(--color-neutral-900);
  --color-text-strong:     var(--color-neutral-950);
  --color-text-muted:      var(--color-neutral-600);
  --color-text-subtle:     var(--color-neutral-500);
  --color-text-inverse:    var(--color-neutral-0);

  --color-border:          var(--color-neutral-200);
  --color-border-strong:   var(--color-neutral-300);
  --color-border-subtle:   var(--color-neutral-100);

  --color-primary:         var(--color-primary-600);
  --color-primary-hover:   var(--color-primary-700);
  --color-primary-active:  var(--color-primary-800);
  --color-primary-soft:    var(--color-primary-50);
  --color-primary-contrast:var(--color-neutral-0);

  --color-secondary:       var(--color-secondary-600);
  --color-secondary-hover: var(--color-secondary-700);
  --color-secondary-soft:  var(--color-secondary-50);

  --color-success:         var(--color-success-500);
  --color-success-soft:    #ecfdf5;
  --color-warning:         var(--color-warning-500);
  --color-warning-soft:    #fffbeb;
  --color-danger:          var(--color-danger-500);
  --color-danger-soft:     #fef2f2;
  --color-info:            var(--color-info-500);
  --color-info-soft:       #eff6ff;

  --color-focus-ring:      var(--color-primary-500);
  --color-selection-bg:    var(--color-primary-100);
  --color-selection-fg:    var(--color-neutral-900);

  /* ---------- Typography ---------- */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
                Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-serif: 'Source Serif', 'Merriweather', Georgia, Cambria, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
                'Liberation Mono', monospace;

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

  --font-size-3xs: 0.6875rem; /* 11px */
  --font-size-2xs: 0.75rem;   /* 12px */
  --font-size-xs:  0.8125rem; /* 13px */
  --font-size-sm:  0.875rem;  /* 14px */
  --font-size-md:  1rem;      /* 16px */
  --font-size-lg:  1.125rem;  /* 18px */
  --font-size-xl:  1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 3.75rem;   /* 60px */
  --font-size-7xl: 4.5rem;    /* 72px */

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

  --letter-spacing-tighter: -0.03em;
  --letter-spacing-tight:   -0.015em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.02em;
  --letter-spacing-wider:   0.05em;
  --letter-spacing-widest:  0.1em;

  /* Fluid typographic scale for headings */
  --font-size-display:  clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  --font-size-h1:       clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --font-size-h2:       clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);
  --font-size-h3:       clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --font-size-h4:       clamp(1.125rem, 1rem + 0.5vw, 1.375rem);

  /* ---------- Spacing scale (4px base) ---------- */
  --space-0:  0;
  --space-px: 1px;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-9:  2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  /* Semantic spacing */
  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-3);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);
  --spacing-2xl: var(--space-12);
  --spacing-3xl: var(--space-16);
  --spacing-section: clamp(3rem, 2rem + 4vw, 6rem);
  --spacing-gutter: clamp(1rem, 0.6rem + 1.5vw, 2rem);

  /* ---------- Layout ---------- */
  --container-narrow: 48rem;   /* 768px */
  --container-base:   64rem;   /* 1024px */
  --container-wide:   80rem;   /* 1280px */
  --container-full:   90rem;   /* 1440px */
  --container-padding: clamp(1rem, 0.5rem + 2vw, 2rem);

  --header-height-mobile: 56px;
  --header-height-desktop: 68px;

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-2xs:  2px;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-3xl:  36px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------- Borders ---------- */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-width-4: 4px;

  /* ---------- Shadows ---------- */
  --shadow-2xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-xs:  0 1px 2px 0 rgb(15 23 42 / 0.06);
  --shadow-sm:  0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06);
  --shadow-md:  0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 6px -2px rgb(15 23 42 / 0.06);
  --shadow-lg:  0 12px 24px -6px rgb(15 23 42 / 0.10), 0 4px 10px -4px rgb(15 23 42 / 0.06);
  --shadow-xl:  0 20px 40px -12px rgb(15 23 42 / 0.14), 0 8px 16px -8px rgb(15 23 42 / 0.08);
  --shadow-2xl: 0 32px 64px -16px rgb(15 23 42 / 0.18), 0 12px 24px -10px rgb(15 23 42 / 0.10);
  --shadow-focus: 0 0 0 3px rgb(47 102 245 / 0.35);
  --shadow-focus-inset: inset 0 0 0 2px var(--color-focus-ring);

  /* ---------- Z-index scale ---------- */
  --z-base:       0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-header:     300;
  --z-drawer:     400;
  --z-modal:      500;
  --z-popover:    600;
  --z-tooltip:    700;
  --z-toast:      800;
  --z-skip-link:  900;

  /* ---------- Motion ---------- */
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-normal:  220ms;
  --duration-slow:    320ms;
  --duration-slower:  480ms;

  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --ease-linear:     linear;

  /* ---------- Component tokens ---------- */
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;
  --control-padding-x: var(--space-4);
  --control-padding-y: var(--space-2);

  --header-bg: var(--color-surface);
  --header-border: var(--color-border);
  --footer-bg: var(--color-surface-alt);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-sm);

  /* Focus ring */
  --focus-outline-width: 3px;
  --focus-outline-offset: 2px;
  --focus-outline-color: var(--color-focus-ring);

  /* Touch target minimum */
  --tap-target: 44px;
}

/* ---------- Dark theme overrides ---------- */
[data-theme='dark'] {
  --color-background:     #0b1220;
  --color-surface:        #111a2e;
  --color-surface-alt:    #0f172a;
  --color-surface-raised: #1a2338;
  --color-overlay:        rgb(2 6 23 / 0.72);

  --color-text:           #e6edf7;
  --color-text-strong:    #f7fafc;
  --color-text-muted:     #9fb0c9;
  --color-text-subtle:    #7d8fa9;
  --color-text-inverse:   #0b1220;

  --color-border:         #23304a;
  --color-border-strong:  #33415c;
  --color-border-subtle:  #1a2338;

  --color-primary:        var(--color-primary-400);
  --color-primary-hover:  var(--color-primary-300);
  --color-primary-active: var(--color-primary-200);
  --color-primary-soft:   #172a4d;

  --color-secondary:      var(--color-secondary-300);

  --color-success-soft:   #052e1c;
  --color-warning-soft:   #2b1f05;
  --color-danger-soft:    #2a0b0b;
  --color-info-soft:      #082036;

  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --shadow-md:  0 4px 12px -2px rgb(0 0 0 / 0.45), 0 2px 6px -2px rgb(0 0 0 / 0.35);
  --shadow-lg:  0 12px 24px -6px rgb(0 0 0 / 0.5), 0 4px 10px -4px rgb(0 0 0 / 0.4);
  --shadow-xl:  0 20px 40px -12px rgb(0 0 0 / 0.55), 0 8px 16px -8px rgb(0 0 0 / 0.45);

  --header-bg:    var(--color-surface);
  --card-bg:      var(--color-surface);
  --card-border:  var(--color-border);
}

/* Auto dark mode when user has not explicitly set a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-background:     #0b1220;
    --color-surface:        #111a2e;
    --color-surface-alt:    #0f172a;
    --color-surface-raised: #1a2338;
    --color-overlay:        rgb(2 6 23 / 0.72);

    --color-text:           #e6edf7;
    --color-text-strong:    #f7fafc;
    --color-text-muted:     #9fb0c9;
    --color-text-subtle:    #7d8fa9;
    --color-text-inverse:   #0b1220;

    --color-border:         #23304a;
    --color-border-strong:  #33415c;
    --color-border-subtle:  #1a2338;

    --color-primary:        var(--color-primary-400);
    --color-primary-hover:  var(--color-primary-300);
    --color-primary-active: var(--color-primary-200);
    --color-primary-soft:   #172a4d;

    --color-success-soft:   #052e1c;
    --color-warning-soft:   #2b1f05;
    --color-danger-soft:    #2a0b0b;
    --color-info-soft:      #082036;
  }
}