/* ============================================================
   tokens.css — Portfolio Design Tokens
   Source: Figma · Snapshot Scheduling · Colors frame
   Last synced: 2026-03-19
   
   To update: paste your Figma frame URL into Claude Code and say
   "Fetch the latest tokens from Figma and update tokens.css"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {

  /* ── Backgrounds ──────────────────────────────────── */
  --bg-page:              #FAFAF9;  /* color-background-page-default */
  --bg-card:              #F3F2EF;  /* one step darker than page */
  --bg-card-hover:        #ECECEA;  /* card hover state */
  --bg-success-subtle:    #E5FFF3;  /* green ramp 50 */
  --bg-teal-subtle:       #E5FDFF;  /* teal ramp 50 */

  /* ── Text ─────────────────────────────────────────── */
  --text-primary:         #231C07;  /* color-text-primary */
  --text-secondary:       #525C66;  /* color-text-secondary */
  --text-tertiary:        #B8B8B8;  /* color-text-tertiary */
  --text-on-color:        #FAFAF9;  /* color-text-on-color */

  /* ── Borders ──────────────────────────────────────── */
  --border-strong:        #231C07;  /* color-border-strong */
  --border-subtle:        #DBDBDB;  /* color-border-subtle */
  --border-subtler:       #E0E0E0;  /* Border/$border-subtle-01 */

  /* ── CTA — Green (Primary action) ────────────────── */
  --cta:                  #34C17F;  /* color-background-button-primary */
  --cta-hover:            #1BA865;  /* color-background-button-primary-hover */
  --cta-selected:         #0F7B48;  /* color-background-button-primary-selected */
  --cta-border:           #0F737B;  /* color-border-button-primary */

  /* ── Accent — Teal (Links, highlights) ───────────── */
  --accent:               #49CED8;  /* color-background-link-primary-hover */
  --accent-deep:          #096B72;  /* color-background-link-primary-selected */

  /* ── Secondary accent ────────────────────────────── */
  --gold:                 #EFCB68;  /* secondary accent from color ramp */

  /* ── Typography — Families ───────────────────────── */
  --font-display:         'Space Mono', monospace;       /* Header/Header 5 */
  --font-body:            'Plus Jakarta Sans', sans-serif; /* Body/16/Regular */
  --font-mono:            'IBM Plex Mono', monospace;    /* Utility styles/code-01 */

  /* ── Typography — Scale ──────────────────────────── */
  --text-h4:              56px;   /* Header 4 — hero, page-level */
  --text-h5:              32px;   /* Header 5 — section titles   */
  --text-body-lg:         24px;   /* Body large */
  --text-body-md:         20px;   /* Body medium */
  --text-body-sm:         16px;   /* Body base — Body/16/Regular */
  --text-label:           12px;   /* Utility/code-01 */

  /* ── Typography — Weights ────────────────────────── */
  --w-regular:            400;
  --w-semibold:           600;
  --w-bold:               700;    /* Header style: Bold */

  /* ── Typography — Line heights ───────────────────── */
  --lh-display:           1.05;
  --lh-body:              1.6;
  --lh-tight:             1.2;
  --lh-mono:              1;      /* code-01 lineHeight: 16/12 */

  /* ── Typography — Letter spacing ─────────────────── */
  --ls-mono:              0.32px; /* code-01 letterSpacing */
  --ls-label:             0.08em;
  --ls-caps:              0.12em;

  /* ── Spacing ──────────────────────────────────────── */
  --space-1:              4px;
  --space-2:              8px;
  --space-3:              12px;
  --space-4:              16px;
  --space-6:              24px;
  --space-8:              32px;
  --space-12:             48px;
  --space-16:             64px;
  --space-24:             96px;

  /* ── Border radius ────────────────────────────────── */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-pill:          100px;

  /* ── Shadows ──────────────────────────────────────── */
  --shadow-card:          0 2px 12px rgba(35, 28, 7, 0.06);
  --shadow-float:         0 4px 24px rgba(35, 28, 7, 0.10);

  /* ── Transitions ──────────────────────────────────── */
  --transition-fast:      0.15s ease;
  --transition-base:      0.18s ease;
  --transition-slow:      0.3s ease;

}