/**
 * Design Tokens: AI-Augmented Engineering Portfolio
 * Philosophy: Dark Precision — Linear, Vercel, Resend aesthetic
 * Base unit: 4px
 *
 * This file is the single source of truth for all visual values.
 * No component should hardcode a color, size, or timing value.
 */

/* ─── Dark Mode (default — this site is intentionally dark) ─── */
:root {
  /* Color: Backgrounds */
  --color-bg-primary:    #0a0a0a;   /* Main page background */
  --color-bg-secondary:  #111111;   /* Cards, surface areas */
  --color-bg-tertiary:   #1a1a1a;   /* Subtle wells, hover states */
  --color-bg-inverse:    #f0f0f0;   /* Not used, kept for completeness */

  /* Color: Text */
  --color-text-primary:  #f0f0f0;   /* Main body text */
  --color-text-secondary:#a1a1aa;   /* Subdued labels, metadata */
  --color-text-tertiary: #52525b;   /* Placeholder, disabled */
  --color-text-inverse:  #0a0a0a;   /* Text on light backgrounds */

  /* Color: Borders */
  --color-border-primary:   #1e1e1e; /* Default card/section borders */
  --color-border-secondary: #2a2a2a; /* Subtle dividers */
  --color-border-focus:     #3b82f6; /* Focus ring */

  /* Color: Accent (electric blue) */
  --color-accent-primary:        #3b82f6;
  --color-accent-primary-hover:  #60a5fa;
  --color-accent-primary-active: #2563eb;
  --color-accent-secondary:      #1d4ed8; /* Deeper blue for backgrounds */
  --color-accent-glow:           rgba(59, 130, 246, 0.15); /* Card hover glow */

  /* Color: Status */
  --color-status-success: #22c55e;
  --color-status-warning: #f59e0b;
  --color-status-error:   #ef4444;
  --color-status-info:    #3b82f6;

  /* Color: Overlays */
  --color-surface-overlay:  rgba(0, 0, 0, 0.8);  /* Mobile nav backdrop */
  --color-nav-bg:           rgba(10, 10, 10, 0.85); /* Sticky nav backdrop */

  /* ─── Typography ─────────────────────────────────────────── */
  --font-family-display: 'JetBrains Mono', 'Courier New', monospace;
  --font-family-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono:    'JetBrains Mono', 'Courier New', monospace;

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

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  --line-height-tight:   1.1;  /* Headings */
  --line-height-snug:    1.3;  /* Subheadings */
  --line-height-normal:  1.5;  /* Body */
  --line-height-relaxed: 1.7;  /* Long-form */

  --letter-spacing-tight:  -0.04em; /* Display headings */
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.08em; /* Labels, tags, all-caps */

  /* ─── Spacing (4px base) ─────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */
  --space-11: 12rem;     /* 192px */
  --space-12: 16rem;     /* 256px */

  /* ─── Layout ─────────────────────────────────────────────── */
  --max-width-content: 68ch;      /* Comfortable reading width */
  --max-width-wide:    1024px;    /* Wide content, project grid */
  --max-width-page:    1280px;    /* Full page container */

  --nav-height: 64px;

  --border-radius-sm:   2px;
  --border-radius-md:   4px;
  --border-radius-lg:   8px;
  --border-radius-full: 9999px;

  /* ─── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.7);
  --shadow-glow:  0 0 24px rgba(59, 130, 246, 0.2);   /* Accent glow for cards */
  --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.4);  /* Focus ring */

  /* ─── Motion ─────────────────────────────────────────────── */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0, 0, 0.2, 1);
  --easing-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Breakpoints (reference only — use in media queries) ── */
  --breakpoint-sm:  375px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
}

/* ─── Light Mode (dormant — site is dark-only by design) ────── */
/* Remove [data-theme="light"] from <html> to activate */
[data-theme="light"] {
  --color-bg-primary:    #ffffff;
  --color-bg-secondary:  #f8f8f8;
  --color-bg-tertiary:   #f0f0f0;

  --color-text-primary:  #111111;
  --color-text-secondary:#52525b;
  --color-text-tertiary: #a1a1aa;

  --color-border-primary:   #e4e4e7;
  --color-border-secondary: #d4d4d8;

  --color-nav-bg: rgba(255, 255, 255, 0.85);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
}

/* ─── Reduced Motion ─────────────────────────────────────────── */
/* GSAP checks this in main.js — this ensures CSS transitions also respect it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}