/* =============================================================
   ResumeCraft — main.css
   Design tokens · Reset · Typography · Layout · Animations
   ============================================================= */

/* ---------------------------------------------------------------
   DESIGN TOKENS
   --------------------------------------------------------------- */
:root {
  /* Colours */
  --bg:             #FAFAF9;
  --bg-subtle:      #F4F4F2;
  --surface:        #FFFFFF;
  --border:         #E5E5E3;
  --border-strong:  #D0D0CC;

  --text:           #1A1A18;
  --text-2:         #6B6B63;
  --text-3:         #9B9B93;
  --text-inverse:   #FFFFFF;

  --accent:         #2563EB;
  --accent-hover:   #1D4ED8;
  --accent-press:   #1E40AF;
  --accent-subtle:  #EFF6FF;
  --accent-text:    #1E40AF;

  --error:          #DC2626;
  --error-subtle:   #FEF2F2;
  --error-border:   #FECACA;
  --success:        #16A34A;
  --success-subtle: #F0FDF4;
  --success-border: #BBF7D0;
  --warning:        #D97706;
  --warning-subtle: #FFFBEB;

  /* Typography */
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;

  /* Font-size scale */
  --fs-10: 0.625rem;   /* 10px */
  --fs-11: 0.6875rem;  /* 11px */
  --fs-12: 0.75rem;    /* 12px */
  --fs-13: 0.8125rem;  /* 13px */
  --fs-14: 0.875rem;   /* 14px */
  --fs-15: 0.9375rem;  /* 15px */
  --fs-16: 1rem;       /* 16px */
  --fs-18: 1.125rem;   /* 18px */
  --fs-20: 1.25rem;    /* 20px */
  --fs-24: 1.5rem;     /* 24px */
  --fs-28: 1.75rem;    /* 28px */
  --fs-32: 2rem;       /* 32px */
  --fs-36: 2.25rem;    /* 36px */
  --fs-42: 2.625rem;   /* 42px */
  --fs-48: 3rem;       /* 48px */
  --fs-56: 3.5rem;     /* 56px */

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* Letter spacing */
  --ls-tight:  -0.025em;
  --ls-snug:   -0.01em;
  --ls-normal:  0em;
  --ls-wide:    0.05em;
  --ls-wider:   0.1em;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Border radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.07), 0 8px 10px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.12);
  --shadow-resume: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);

  /* Transitions */
  --t-fast:  120ms ease;
  --t-base:  180ms ease;
  --t-slow:  280ms ease;
  --t-bounce: 280ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --header-h:    60px;
  --container:   1280px;
  --editor-w:    400px;
  --preview-min: 480px;

  /* Z-index layers */
  --z-base:   1;
  --z-float:  10;
  --z-sticky: 100;
  --z-header: 200;
  --z-modal:  300;
  --z-toast:  400;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first last;
}

body {
  font-family: var(--font);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select  { font: inherit; }
p, h1, h2, h3, h4, h5, h6       { overflow-wrap: break-word; }
a  { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; }
textarea { resize: vertical; }

/* ---------------------------------------------------------------
   TYPOGRAPHY SCALE
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text);
  letter-spacing: var(--ls-tight);
}

/* ---------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--sp-10); }
}

.section      { padding-block: var(--sp-20); }
.section-lg   { padding-block: var(--sp-24); }
.section-sm   { padding-block: var(--sp-12); }

/* ---------------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInFast {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 1000px; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(4px) scale(0.97); }
}

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

/* ---------------------------------------------------------------
   FOCUS
   --------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------
   UTILITIES
   --------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border-width: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden { display: none !important; }

.animate-in {
  animation: fadeIn var(--t-slow) ease both;
}