/* ============================================================
   Sofi Le — Portfolio
   BC maroon + gold · warm cream / charcoal dual theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..600&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Righteous&display=swap');

/* Roca Two (paid font — drop the files into fonts/ and it applies to every big heading) */
@font-face {
  font-family: 'Roca Two';
  src: url('fonts/RocaTwo.otf') format('opentype');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* palette — light (cream / BC) */
  --bg:        #efe9dc;
  --bg-2:      #e6dfce;
  --panel:     #14110c;          /* room shadowbox (always darkish) */
  --card:      #f4efe4;
  --ink:       #28231d;
  --ink-soft:  #5f574b;
  --ink-faint: #8c8273;
  --line:      #d8cfbb;
  --maroon:    oklch(0.44 0.135 22);
  --maroon-dim:oklch(0.54 0.10 22);
  --gold:      oklch(0.70 0.105 78);
  --gold-deep: oklch(0.60 0.10 72);

  /* tweakable */
  --accent:    var(--gold);      /* glow + highlight */
  --display:   'Roca Two', Georgia, 'Times New Roman', serif;

  --mono: 'Righteous', ui-monospace, monospace;
  --serif: 'Source Serif 4', Georgia, serif;

  --shadow-soft: 0 18px 50px -24px rgba(24,18,10,.55);
  --ease: cubic-bezier(.22,.61,.36,1);
}

:root[data-theme="dark"] {
  --bg:        #2b2620;
  --bg-2:      #332e27;
  --panel:     #211d18;
  --card:      #38322a;
  --ink:       #f1eadc;
  --ink-soft:  #c5bba6;
  --ink-faint: #948a76;
  --line:      #4a4236;
  --maroon:    oklch(0.66 0.13 24);
  --maroon-dim:oklch(0.58 0.11 24);
  --gold:      oklch(0.80 0.11 80);
  --gold-deep: oklch(0.72 0.105 76);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  transition: background .6s var(--ease), color .4s var(--ease);
}

body { overflow-x: hidden; }

::selection { background: color-mix(in oklch, var(--accent) 40%, transparent); }

a { color: inherit; }

/* ---- type helpers ---- */
.display { font-family: var(--display); font-weight: 400; line-height: .92; letter-spacing: -.01em; }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 500;
}
.serif-italic { font-style: italic; }

/* inline emphasis colors for body copy */
.t-red { color: oklch(0.36 0.16 25); font-weight: 600; }
.t-gold { color: var(--gold-deep); font-weight: 600; }

/* ============================================================
   APP SHELL
   ============================================================ */
#root { min-height: 100vh; }

/* scroll-driven fade-in for list/grid items (timeline, projects, awards) */
.fade-item { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fade-item.in { opacity: 1; transform: none; }
.proj-grid .fade-item:nth-child(3n+2) { transition-delay: .08s; }
.proj-grid .fade-item:nth-child(3n+3) { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .fade-item { opacity: 1; transform: none; transition: none; } }

.fade-enter { animation: fadeUp .6s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}