/*
 * ================================================================
 *  VICKY ZHOU — PORTFOLIO DESIGN SYSTEM
 *  design-system.css
 *
 *  Table of contents
 *  1. Design tokens (light mode)
 *  2. Dark mode token overrides
 *  3. Reduced-motion override
 *  4. Base reset & root typography
 *  5. Skip link
 *  6. Navigation
 *  7. Buttons
 *  8. Inputs
 *  9. Cards
 * 10. Badges / Tags
 * 11. Focus utilities
 * 12. Utility classes
 * ================================================================
 */

/* ================================================================
   1. DESIGN TOKENS — LIGHT MODE
   ================================================================ */

:root {

  /* ----------------------------------------------------------
     Brand primitives
     ---------------------------------------------------------- */
  --color-brand-900:  #1c3480;   /* deepest blue */
  --color-brand-700:  #2549a8;
  --color-brand-600:  #3258bc;   /* primary brand blue */
  --color-brand-400:  #6c8ef5;   /* lighter / gradient end */
  --color-brand-200:  #c7d3fc;
  --color-brand-100:  #dbe1ff;   /* badge surfaces */
  --color-brand-50:   #eef1ff;

  --color-accent-800: #3b1e72;
  --color-accent-700: #51358f;   /* purple accent */
  --color-accent-200: #d4b8ff;
  --color-accent-100: #eaddff;   /* accent badge surface */
  --color-accent-50:  #f5f0ff;

  --color-violet-700: #6d28d9;   /* button hover gradient start */
  --color-violet-500: #8b5cf6;   /* button hover gradient end */

  --color-gold-400:   #fbbf24;   /* sparkle / decorative gold */

  /* ----------------------------------------------------------
     Neutral palette
     ---------------------------------------------------------- */
  --color-neutral-950: #0e1012;
  --color-neutral-900: #1a1c1f;
  --color-neutral-850: #1b1c1a;
  --color-neutral-700: #434652;
  --color-neutral-600: #475569;
  --color-neutral-500: #8b909e;
  --color-neutral-400: #b0b5c4;
  --color-neutral-300: #e4e2df;
  --color-neutral-200: #edf0ff;  /* footer/surface */
  --color-neutral-150: #f3f3f7;  /* card surface */
  --color-neutral-100: #f5f5f9;
  --color-neutral-50:  #f9f9fd;  /* page background */

  /* ----------------------------------------------------------
     Semantic colors
     ---------------------------------------------------------- */
  --color-success:         #15803d;
  --color-success-surface: #dcfce7;
  --color-success-text:    #14532d;

  --color-warning:         #d97706;
  --color-warning-surface: #fef3c7;
  --color-warning-text:    #78350f;

  --color-error:           #dc2626;
  --color-error-surface:   #fee2e2;
  --color-error-text:      #7f1d1d;

  --color-info:            #0284c7;
  --color-info-surface:    #e0f2fe;
  --color-info-text:       #0c4a6e;

  /* ----------------------------------------------------------
     Contextual aliases — light mode
     ---------------------------------------------------------- */
  --color-bg:               var(--color-neutral-50);
  --color-bg-card:          var(--color-neutral-150);
  --color-bg-footer:        var(--color-neutral-200);
  --color-bg-nav:           rgba(255, 255, 255, 0.30);

  --color-text-primary:     var(--color-neutral-900);
  --color-text-secondary:   var(--color-neutral-700);
  --color-text-muted:       var(--color-neutral-600);
  --color-text-placeholder: var(--color-neutral-500);
  --color-text-inverse:     #ffffff;

  --color-border:           var(--color-neutral-300);
  --color-border-input:     #d0d3df;

  --color-link:             var(--color-brand-600);
  --color-link-hover:       var(--color-brand-700);

  --color-focus-ring:       var(--color-brand-600);

  --color-tag-primary-bg:   var(--color-brand-100);
  --color-tag-primary-text: var(--color-brand-700);
  --color-tag-accent-bg:    var(--color-accent-100);
  --color-tag-accent-text:  var(--color-accent-700);

  /* ----------------------------------------------------------
     Gradients
     ---------------------------------------------------------- */
  --gradient-btn:       linear-gradient(159.4deg, var(--color-brand-600) 0%, var(--color-brand-400) 100%);
  --gradient-btn-hover: linear-gradient(159.4deg, var(--color-brand-900) 0%, var(--color-brand-700) 100%);
  --gradient-blob-1: linear-gradient(135deg, rgba(108, 142, 245, 0.20) 0%, rgba(187, 158, 255, 0.20) 100%);
  --gradient-blob-2: linear-gradient( 45deg, rgba(255, 221, 177, 0.15) 0%, rgba(219, 225, 255, 0.20) 100%);
  --gradient-blob-3: linear-gradient( 45deg, rgba(113, 190, 238, 0.15) 0%, rgba(219, 225, 255, 0.20) 100%);

  /* ----------------------------------------------------------
     Typography
     ---------------------------------------------------------- */
  --font-body:    'Poppins', sans-serif;
  --font-display: 'Alex Brush', cursive;

  /* Fluid scale — clamp(min, preferred, max) */
  --text-xs:   0.75rem;                          /* 12 px */
  --text-sm:   0.875rem;                         /* 14 px */
  --text-base: 1rem;                             /* 16 px — minimum body size */
  --text-lg:   1.125rem;                         /* 18 px */
  --text-xl:   1.25rem;                          /* 20 px */
  --text-2xl:  1.5rem;                           /* 24 px */
  --text-3xl:  clamp(1.75rem, 3.5vw, 2rem);     /* 28–32 px */
  --text-4xl:  clamp(2rem,    4.5vw, 2.5rem);   /* 32–40 px */
  --text-hero: clamp(2.5rem,  7vw,   4rem);     /* 40–64 px */

  --font-regular:  400;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.075em;
  --tracking-widest:  0.15em;

  /* ----------------------------------------------------------
     Spacing — 4 px base grid
     ---------------------------------------------------------- */
  --space-px:  1px;
  --space-0-5: 0.125rem;  /*  2 px */
  --space-1:   0.25rem;   /*  4 px */
  --space-1-5: 0.375rem;  /*  6 px */
  --space-2:   0.5rem;    /*  8 px */
  --space-3:   0.75rem;   /* 12 px */
  --space-4:   1rem;      /* 16 px */
  --space-5:   1.25rem;   /* 20 px */
  --space-6:   1.5rem;    /* 24 px */
  --space-7:   1.75rem;   /* 28 px */
  --space-8:   2rem;      /* 32 px */
  --space-9:   2.25rem;   /* 36 px */
  --space-10:  2.5rem;    /* 40 px */
  --space-11:  2.75rem;   /* 44 px */
  --space-12:  3rem;      /* 48 px */
  --space-14:  3.5rem;    /* 56 px */
  --space-16:  4rem;      /* 64 px */
  --space-18:  4.5rem;    /* 72 px */
  --space-20:  5rem;      /* 80 px */
  --space-24:  6rem;      /* 96 px */
  --space-28:  7rem;      /* 112 px */
  --space-32:  8rem;      /* 128 px */

  /* ----------------------------------------------------------
     Border radius
     ---------------------------------------------------------- */
  --radius-sm:   0.375rem;  /*  6 px */
  --radius-md:   0.75rem;   /* 12 px */
  --radius-lg:   1.25rem;   /* 20 px */
  --radius-xl:   1.5rem;    /* 24 px */
  --radius-2xl:  2rem;      /* 32 px */
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     Shadows
     ---------------------------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-nav: 0 8px 32px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-btn:       0 20px 25px -5px rgba(50, 88, 188, 0.20),
                      0 8px 10px -6px rgba(50, 88, 188, 0.20);
  --shadow-btn-hover: 0 20px 25px -5px rgba(28, 52, 128, 0.35),
                      0 8px 10px -6px rgba(28, 52, 128, 0.25);

  /* ----------------------------------------------------------
     Z-index scale
     ---------------------------------------------------------- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 20;
  --z-nav:     50;
  --z-skip:    60;

  /* ----------------------------------------------------------
     Transitions
     ---------------------------------------------------------- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  --transition-fast:   var(--duration-fast)   var(--ease-default);
  --transition-base:   var(--duration-base)   var(--ease-default);
  --transition-slow:   var(--duration-slow)   var(--ease-default);
  --transition-spring: var(--duration-base)   var(--ease-spring);

  /* ----------------------------------------------------------
     Layout
     ---------------------------------------------------------- */
  --content-max-width:      1280px;
  --hero-content-max-width: 56rem;   /* 896 px — hero text column cap */
  --hero-tagline-max-width: 52rem;   /* ~832 px */
  --project-desc-max-width: 32rem;   /* ~512 px */
  --content-gutter:         var(--space-6);
  --nav-height:             75px;

  /* Hero-specific */
  --hero-blob-blur: 60px;
}


/* ================================================================
   2. DARK MODE TOKEN OVERRIDES
   ================================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Contextual aliases */
    --color-bg:               #0d0f16;
    --color-bg-card:          #171a26;
    --color-bg-footer:        #111422;
    --color-bg-nav:           rgba(13, 15, 22, 0.70);

    --color-text-primary:     #e8eaf2;
    --color-text-secondary:   #9da3b9;
    --color-text-muted:       #7a8199;
    --color-text-placeholder: #555c78;

    --color-border:           #242736;
    --color-border-input:     #2e3245;

    --color-link:             var(--color-brand-400);
    --color-link-hover:       #8ca6f8;

    --color-focus-ring:       var(--color-brand-400);

    /* Badge surfaces adjust for dark bg */
    --color-tag-primary-bg:   #1e2d5e;
    --color-tag-primary-text: #93b0ff;
    --color-tag-accent-bg:    #2e1f5e;
    --color-tag-accent-text:  #c4a8ff;

    /* Shadows deepen */
    --shadow-nav:  0 8px 32px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
    --shadow-btn:  0 20px 25px -5px rgba(50, 88, 188, 0.35),
                   0 8px 10px -6px rgba(50, 88, 188, 0.25);
  }
}


/* ================================================================
   3. REDUCED-MOTION OVERRIDE
   All durations collapse to near-zero; scroll behavior turns off.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}


/* ================================================================
   4. BASE RESET & ROOT TYPOGRAPHY
   ================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  font-weight:      var(--font-regular);
  line-height:      var(--leading-normal);
  color:            var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video {
  display:   block;
  max-width: 100%;
}

a {
  color:           var(--color-link);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

ul, ol {
  list-style: none;
}


/* ================================================================
   5. SKIP LINK
   Hidden until focused via keyboard — appears at top-left corner.
   ================================================================ */

.skip-link {
  position:      absolute;
  top:           calc(-1 * var(--space-20));
  left:          var(--space-4);
  z-index:       var(--z-skip);
  display:       inline-block;
  padding:       var(--space-3) var(--space-6);
  background:    var(--color-brand-600);
  color:         var(--color-text-inverse);
  font-family:   var(--font-body);
  font-size:     var(--text-base);
  font-weight:   var(--font-semibold);
  border-radius: var(--radius-full);
  transition:    top var(--transition-fast);
}

.skip-link:focus {
  top:     var(--space-4);
  outline: 3px solid var(--color-text-inverse);
  outline-offset: 2px;
}


/* ================================================================
   6. NAVIGATION
   ================================================================ */

.site-header {
  display:         flex;
  justify-content: center;
  padding:         var(--space-10) var(--space-6) var(--space-4);
}

.nav-pill {
  display:           flex;
  align-items:       center;
  gap:               var(--space-6);
  padding:           var(--space-3) var(--space-6);
  border-radius:     var(--radius-full);
  backdrop-filter:   blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background:        var(--color-bg-nav);
  box-shadow:        var(--shadow-nav);
}

/* Tablet+ widens gap */
@media (min-width: 768px) {
  .nav-pill {
    gap:     var(--space-8);
    padding: var(--space-3) var(--space-8);
  }
}

.nav-pill__link {
  color:          var(--color-text-muted);
  font-size:      var(--text-base);
  font-weight:    var(--font-regular);
  letter-spacing: var(--tracking-wide);
  white-space:    nowrap;
  transition:     color var(--transition-fast);
}


.nav-pill__link:hover {
  color: var(--color-link);
}

.nav-pill__link:focus-visible {
  outline:        3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
  color:          var(--color-link);
}

/* Active page indicator */
.nav-pill__link[aria-current="page"] {
  color:       var(--color-link);
  font-weight: var(--font-semibold);
}


/* ================================================================
   7. BUTTONS
   ================================================================ */

/* Base — shared across all variants */
.btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            var(--space-2);
  padding:        var(--space-4) var(--space-8);
  border:         none;
  border-radius:  var(--radius-full);
  font-family:    var(--font-body);
  font-size:      var(--text-lg);
  font-weight:    var(--font-regular);
  line-height:    1;
  cursor:         pointer;
  text-decoration: none;
  transition:
    opacity    var(--transition-base),
    transform  var(--transition-fast),
    box-shadow var(--transition-base);
  user-select: none;
}

.btn:focus-visible {
  outline:        3px solid var(--color-focus-ring);
  outline-offset: 4px;
  border-radius:  var(--radius-full);
}

/* Primary — gradient fill */
.btn--primary {
  background:  var(--gradient-btn);
  color:       var(--color-text-inverse);
  box-shadow:  var(--shadow-btn);
}

.btn--primary:hover {
  background:  var(--gradient-btn-hover);
  box-shadow:  var(--shadow-btn-hover);
  color:       var(--color-text-inverse); /* stays white on purple */
}

.btn--primary:active {
  transform:  scale(0.97);
  opacity:    0.85;
  box-shadow: var(--shadow-btn);
}

.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  opacity:        0.45;
  cursor:         not-allowed;
  box-shadow:     none;
  pointer-events: none;
}

/* Ghost variant (for future use) */
.btn--ghost {
  background:  transparent;
  color:       var(--color-link);
  border:      1.5px solid var(--color-brand-200);
}

.btn--ghost:hover {
  background:   var(--color-brand-50);
  border-color: var(--color-brand-600);
  color:        var(--color-brand-700);
}

.btn--ghost:active {
  transform: scale(0.97);
}

.btn--ghost:disabled {
  opacity:        0.45;
  cursor:         not-allowed;
  pointer-events: none;
}


/* ================================================================
   8. INPUTS (included for design completeness / future forms)
   ================================================================ */

.input {
  display:       block;
  width:         100%;
  padding:       var(--space-3) var(--space-4);
  font-family:   var(--font-body);
  font-size:     var(--text-base);
  font-weight:   var(--font-regular);
  color:         var(--color-text-primary);
  background:    var(--color-bg-card);
  border:        1.5px solid var(--color-border-input);
  border-radius: var(--radius-md);
  outline:       none;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

.input::placeholder {
  color: var(--color-text-placeholder);
}

.input:hover {
  border-color: var(--color-brand-400);
}

.input:focus {
  border-color: var(--color-brand-600);
  box-shadow:   0 0 0 3px rgba(50, 88, 188, 0.18);
}

.input:focus-visible {
  outline: none; /* border + shadow replaces outline */
}

.input:disabled {
  opacity:        0.50;
  cursor:         not-allowed;
  background:     var(--color-neutral-100);
}

.input--error {
  border-color: var(--color-error);
}

.input--error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Label */
.label {
  display:       block;
  margin-bottom: var(--space-1-5);
  font-size:     var(--text-sm);
  font-weight:   var(--font-semibold);
  color:         var(--color-text-secondary);
}

/* Field group */
.field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1-5);
}


/* ================================================================
   9. CARDS
   ================================================================ */

.card {
  background:    var(--color-bg-card);
  border-radius: var(--radius-2xl);
  box-shadow:    var(--shadow-card);
  overflow:      hidden;
}

/* Interactive card */
.card--interactive {
  cursor:     pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card--interactive:hover {
  transform:  translateY(-4px);
  box-shadow: 0 32px 60px -12px rgba(0, 0, 0, 0.30);
}

.card--interactive:focus-visible {
  outline:        3px solid var(--color-focus-ring);
  outline-offset: 4px;
}


/* ================================================================
   10. BADGES / TAGS
   ================================================================ */

.badge {
  display:        inline-block;
  padding:        var(--space-1-5) var(--space-4);
  border-radius:  var(--radius-full);
  font-size:      var(--text-xs);
  font-weight:    var(--font-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  white-space:    nowrap;
  line-height:    1;
}

/* Primary (blue) */
.badge--primary {
  background: var(--color-tag-primary-bg);
  color:      var(--color-tag-primary-text);
}

/* Accent (purple) */
.badge--accent {
  background: var(--color-tag-accent-bg);
  color:      var(--color-tag-accent-text);
}

/* Success */
.badge--success {
  background: var(--color-success-surface);
  color:      var(--color-success-text);
}

/* Warning */
.badge--warning {
  background: var(--color-warning-surface);
  color:      var(--color-warning-text);
}

/* Error */
.badge--error {
  background: var(--color-error-surface);
  color:      var(--color-error-text);
}

/* Info */
.badge--info {
  background: var(--color-info-surface);
  color:      var(--color-info-text);
}

/* Badge list — horizontal flex row of badges */
.badge-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-3);
}


/* ================================================================
   11. FOCUS UTILITIES
   Global :focus-visible catch-all — all interactive elements
   get a branded focus ring unless overridden by the component.
   ================================================================ */

:focus-visible {
  outline:        3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

/* Remove the global ring from elements that define their own */
.btn:focus-visible,
.skip-link:focus,
.nav-pill__link:focus-visible,
.card--interactive:focus-visible,
.input:focus-visible {
  outline: none; /* each component handles its own */
}


/* ================================================================
   12. UTILITY CLASSES
   ================================================================ */

/* Visually hidden — accessible text for screen readers */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* Contain text to N lines with ellipsis */
.line-clamp-2 {
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.line-clamp-3 {
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}