/* =========================================================
   ScriptHive — Design Tokens
   A dev studio's own site should look like well-formatted code:
   disciplined structure, a mono accent for labels/data, and one
   warm "compiled" gold that stands for a finished, shipped build.
   ========================================================= */

:root{
  /* ---- Color: paper + ink, one brass-gold accent, one deep navy ---- */
  --paper:        #F7F5F0;   /* page background */
  --paper-tint:   #EFEBE2;   /* alternating section wash */
  --ink:          #15181D;   /* primary text */
  --ink-soft:     #4B5158;   /* secondary text */
  --line:         #DCD6C8;   /* hairline borders on paper */

  --navy:         #0D1420;   /* deep section background */
  --navy-soft:    #17202E;   /* card-on-navy background */
  --navy-line:    rgba(255,255,255,0.10);
  --paper-on-navy:#F7F5F0;
  --ink-on-navy:  rgba(247,245,240,0.66);

  --gold:         #C79A4B;   /* signature accent — "compiled" gold */
  --gold-strong:  #B4842F;
  --gold-tint:    rgba(199,154,75,0.14);

  --code-green:   #7FBF8F;   /* secondary accent, terminal cursor / success */

  /* ---- Type: technical display + humanist body + mono utility ---- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --fs-eyebrow:   0.78rem;
  --fs-body:      1rem;
  --fs-lede:      1.15rem;
  --fs-h3:        1.25rem;
  --fs-h2:        clamp(1.9rem, 3.4vw, 2.75rem);
  --fs-h1:        clamp(2.4rem, 5.4vw, 4.2rem);

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  --ls-eyebrow: 0.14em;
  --ls-tight:   -0.02em;

  /* ---- Space scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10:128px;

  /* ---- Shape / elevation ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(13,20,32,0.04), 0 10px 30px -12px rgba(13,20,32,0.14);
  --shadow-lift: 0 20px 50px -18px rgba(13,20,32,0.35);

  --ease-out: cubic-bezier(.16,.8,.24,1);
  --dur-fast: 180ms;
  --dur-med:  420ms;

  --container: 1180px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}