/* ================================================================
   DESIGN TOKENS — Alejandro Arab Portfolio
   Source of truth: Figma file Z7NPMYSLT4oPu1usXYGCBv
   To update: ask Claude to read Figma variables and patch this file.
   ================================================================ */

@import url('https://db.onlinewebfonts.com/c/4571adf8e6d8270ea61a4f43a3ef31d2?family=Departure+Mono');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

/* ── BASE ─────────────────────────────────────────────────────── */
:root {
  --font:       'Departure Mono', 'Courier New', monospace;
  --font-body:  'Courier Prime', 'Georgia', serif;
  --dur:   1.4s;
  --ease:  cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing tokens — 8pt grid */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-11: 88px;
  --space-12: 96px;
  --space-16: 128px;
  --space-21: 168px;
  --space-24: 192px;

  /* Hero — fixed across themes per Figma 598-54226 / 608-55091 */
  --hero-highlight-bg:   #c8c49a;
  --hero-highlight-text: #10100B;
}

/* ── LIGHT MODE ───────────────────────────────────────────────── */
html[data-theme="light"] {
  /* Core */
  --bg:                  #fafafa;
  --bg-panel:            #e8e6de;
  --bg-card:             #c8c49a;
  --bg-inv:              #1a1a14;
  --text:                #1a1a14;
  --text-inv:            #fafafa;
  --text-secondary:      #706c38;
  --muted:               #5c5a40;

  /* Accent */
  --amber:               #d4900e;
  --amber-mid:           #c17f24;
  --amber-dark:          #b67d00;

  /* Borders */
  --border:              #e6e5e0;

  /* Surfaces */
  --paper:               #ffffff;
  --note:                #8fbcd4;
  --card-yellow:         #f5ead4;
  --card-peach:          #ffe4d8;
  --bezel:               #eeeeee;
}

/* ── DARK MODE ────────────────────────────────────────────────── */
html[data-theme="dark"] {
  /* Core */
  --bg:                  #10100B;
  --bg-panel:            #1a1a14;
  --bg-card:             #3d3c2f;
  --bg-inv:              #fafafa;
  --text:                #c8c49a;
  --text-inv:            #10100B;
  --text-secondary:      #716f55;
  --muted:               #8c8a6a;

  /* Accent */
  --amber:               #d4900e;
  --amber-mid:           #c17f24;
  --amber-dark:          #b67d00;

  /* Borders */
  --border:              #1f1f16;

  /* Surfaces */
  --paper:               #1a1a14;
  --note:                #8fbcd4;
  --card-yellow:         #f5ead4;
  --card-peach:          #ffe4d8;
  --bezel:               #eeeeee;
}

/* ── NOTEBOOK PAPER (per-project pages) ───────────────────────── */
/* Restore the notebook's dividers to their pre-softening values.
   Globally `--border` was reduced to lower contrast on the rest of
   the site; the paper's borders, perforated columns and meta rows
   benefit from the original stronger contrast. Scoping the variable
   here automatically restores every `var(--border)` reference made
   inside `.notebook-paper`. */
html[data-theme="light"] .notebook-paper { --border: #d1cfc6; }
html[data-theme="dark"]  .notebook-paper { --border: #2d2d21; }