/* Design System & Tokens - Muhammad Hayyan Portfolio */

:root {
  /* Fonts */
  --font-headings: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Typography Scale */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: 1.875rem;   /* 30px */
  --fs-3xl: 2.25rem;    /* 36px */
  --fs-4xl: 3rem;       /* 48px */
  --fs-5xl: 4.5rem;     /* 72px */

  /* Spacing Scale (8px system) */
  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --sp-96: 6rem;

  /* Border Radius Scale */
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;
  --r-full: 9999px;

  /* Transition Durations */
  --t-fast: 150ms;
  --t-normal: 250ms;
  --t-slow: 400ms;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);

  /* Shared Brand Colors (HSL values for transparency manipulation) */
  --primary-hsl: 221, 83%, 53%;      /* #2563EB */
  --secondary-hsl: 262, 83%, 58%;    /* #7C3AED */
  --accent-hsl: 188, 91%, 43%;       /* #06B6D4 */

  --color-primary: hsl(var(--primary-hsl));
  --color-secondary: hsl(var(--secondary-hsl));
  --color-accent: hsl(var(--accent-hsl));

  /* Theme Defaults (Dark Theme as primary default) */
  --bg-hsl: 222, 47%, 11%;           /* #0F172A */
  --surface-hsl: 224, 71%, 4%;       /* #030712 */
  --text-hsl: 210, 40%, 98%;         /* #F8FAFC */
  --muted-hsl: 215, 20%, 65%;        /* #94A3B8 */
  --border-hsl: 217, 19%, 27%;       /* #334155 */

  --color-bg: hsl(var(--bg-hsl));
  --color-surface: hsla(var(--surface-hsl), 0.7);
  --color-surface-raw: hsl(var(--surface-hsl));
  --color-text: hsl(var(--text-hsl));
  --color-muted: hsl(var(--muted-hsl));
  --color-border: hsla(var(--border-hsl), 0.4);

  /* Shadows (Dark Theme) */
  --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-premium: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  --shadow-glow: 0 0 30px -10px rgba(6, 182, 212, 0.25);
  --glass-reflection: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
  --scrollbar-bg: rgba(255, 255, 255, 0.05);
  --scrollbar-thumb: rgba(255, 255, 255, 0.2);
}

/* Light Theme Variables overrides */
[data-theme="light"] {
  --bg-hsl: 210, 40%, 98%;           /* #F8FAFC */
  --surface-hsl: 0, 0%, 100%;        /* #FFFFFF */
  --text-hsl: 222, 47%, 11%;         /* #0F172A */
  --muted-hsl: 215, 16%, 47%;        /* #64748B */
  --border-hsl: 214, 32%, 91%;       /* #E2E8F0 */

  --color-bg: hsl(var(--bg-hsl));
  --color-surface: hsla(var(--surface-hsl), 0.7);
  --color-surface-raw: hsl(var(--surface-hsl));
  --color-text: hsl(var(--text-hsl));
  --color-muted: hsl(var(--muted-hsl));
  --color-border: hsla(var(--border-hsl), 0.8);

  /* Shadows (Light Theme) */
  --shadow-subtle: 0 4px 6px -1px rgba(15, 23, 42, 0.05);
  --shadow-premium: 0 8px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
  --shadow-glow: 0 0 30px -10px rgba(37, 99, 235, 0.15);
  --glass-reflection: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 100%);
  --scrollbar-bg: rgba(0, 0, 0, 0.05);
  --scrollbar-thumb: rgba(0, 0, 0, 0.2);
}

/* Base resets & layout variables */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color var(--t-normal) var(--ease-premium), color var(--t-normal) var(--ease-premium);
}