/* ============================================================
   SHEFFY TECHNOLOGIES — DESIGN TOKENS
   ============================================================ */

:root {

  /* ── COLOR SYSTEM ── */
  --color-black:       #191408;
  --color-yellow:      #FFD600;
  --color-white:       #FFFFFF;
  --color-grey:        #A1A1A1;
  --color-dark-grey:   #1A1A1A;
  --color-surface:     #111111;
  --color-divider:     #2A2A2A;

  /* ── TYPOGRAPHY ── */
  --font-display:      'Jersey 10', sans-serif;
  --font-sans:         'Inter', system-ui, sans-serif;

  --text-h1:           clamp(64px, 7vw, 88px);
  --text-h2:           clamp(36px, 4.5vw, 56px);
  --text-h3:           clamp(24px, 2.5vw, 32px);
  --text-body:         17px;
  --text-small:        14px;
  --text-label:        12px;

  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  --leading-tight:     1.0;
  --leading-snug:      1.2;
  --leading-normal:    1.6;

  --tracking-tight:    -0.04em;
  --tracking-normal:   0em;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.15em;

  /* ── SPACING SCALE ── */
  --space-2:           8px;
  --space-4:           16px;
  --space-6:           24px;
  --space-10:          40px;
  --space-16:          64px;
  --space-24:          96px;
  --space-32:          128px;

  /* ── BORDER RADIUS ── */
  --radius-sm:         0px;
  --radius-md:         0px;
  --radius-lg:         0px;

  /* ── BORDERS ── */
  --border-subtle:     1px solid var(--color-dark-grey);
  --border-divider:    1px solid var(--color-divider);
  --border-yellow:     1px solid var(--color-yellow);

  /* ── TRANSITIONS ── */
  --ease-standard:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-hover:        cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:     250ms;
  --duration-base:     500ms;
  --duration-slow:     700ms;
  --duration-slower:   900ms;

  /* ── Z-INDEX STACK ── */
  --z-base:            0;
  --z-raised:          10;
  --z-overlay:         100;
  --z-nav:             200;
  --z-modal:           300;

  /* ── SHADOWS ── */
  --shadow-card:       0 1px 3px rgba(0,0,0,0.5), 0 8px 32px rgba(0,0,0,0.4);
}