/* ============================================================
   DESIGN TOKENS
   Source: Figma — Petrenko Portfolio Redesign (node 1:2)
   ============================================================ */

:root {

  /* ── COLORS ── */

  /* Backgrounds */
  --c-bg:          #0a0a0c;
  --c-bg-card:     #0f0f12;
  --c-bg-footer:   #101013;
  --c-surface:     #2a2a2e;

  /* Accent */
  --c-accent:        #4493fa;
  --c-accent-border: #125bba;
  --c-online:        #34d27b;   /* "open to work" status dot */

  /* Text */
  --c-text:           #ffffff;
  --c-text-nav:       #cccccc;
  --c-text-muted:     #999999;
  --c-text-body:      rgba(153,153,153,0.85);
  --c-text-label:     #666666;
  --c-text-copyright: #545454;

  /* ── TYPOGRAPHY ── */

  --font-base: 'Inter', system-ui, sans-serif;

  /* Line heights */
  --lh-tight:  1.06;
  --lh-card:   1.3;
  --lh-quote:  1.4;
  --lh-body:   1.6;

  /* Letter spacing */
  --ls-upper-sm: 0.7px;
  --ls-upper-md: 0.8px;
  --ls-upper-lg: 1.2px;

  /* Font sizes */
  --fs-hero-label:    24px;
  --fs-hero-title:    48px;
  --fs-hero-body:     22px;
  --fs-section-title: 24px;
  --fs-about-quote:   36px;
  --fs-about-body:    22px;
  --fs-card-label:    16px;
  --fs-card-title:    20px;
  --fs-card-link:     12px;
  --fs-nav:           16px;
  --fs-footer-heading: 24px;
  --fs-footer-body:   18px;
  --fs-footer-label:  14px;
  --fs-caption:       12px;

  /* ── SPACING ── */

  --sp-page-x:       64px;
  --sp-section-y:    100px;
  --sp-section-y-lg: 150px;
  --sp-card-gap:     30px;
  --sp-card-inner:   20px;
  --sp-card-top:     30px;
  --sp-gap-sm:       8px;
  --sp-gap-md:       14px;
  --sp-gap-lg:       20px;
  --sp-gap-xl:       30px;
  --sp-gap-2xl:      32px;
  --sp-gap-3xl:      50px;

  /* ── BORDERS & RADIUS ── */

  --border-divider:     0.5px solid var(--c-surface);
  --border-card-accent: 2px solid var(--c-accent-border);
  --radius-card:        8px;
}