/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — FlutterGini Portfolio
   Skeuomorphism: warm cream · deep teal · leather · gold
═══════════════════════════════════════════════════════════ */
:root {
  /* ── Colour palette ── */
  --cream:        #f5f0e8;
  --cream2:       #ede7d9;
  --cream3:       #e4dcd0;
  --parchment:    #faf7f2;
  --leather:      #8b6f47;
  --leather-d:    #6b5230;
  --ink:          #1a1208;
  --ink2:         #2d2318;
  --ink3:         #4a3c2a;
  --muted:        #7a6a54;
  --subtle:       #a89880;
  --teal:         #0d7a6b;
  --teal-d:       #095c50;
  --teal-l:       #d4ede9;
  --teal-ll:      #eaf5f3;
  --gold:         #c8962a;
  --gold-l:       #f5e8c8;
  --white:        #fffdf9;
  --border:       #d4c8b4;
  --border2:      #c4b49e;

  /* ── Skeuomorphic shadow system ── */
  --sh-inset:       inset 0 2px 4px rgba(0,0,0,.12),
                    inset 0 1px 2px rgba(0,0,0,.08);
  --sh-raised:      0 1px 3px rgba(0,0,0,.12),
                    0 2px 6px rgba(0,0,0,.08),
                    0 0 0 1px rgba(255,255,255,.6) inset,
                    0 1px 0 rgba(255,255,255,.8) inset;
  --sh-card:        0 4px 8px rgba(0,0,0,.10),
                    0 8px 24px rgba(0,0,0,.07),
                    0 1px 0 rgba(255,255,255,.9) inset;
  --sh-card-hover:  0 8px 20px rgba(0,0,0,.14),
                    0 16px 40px rgba(0,0,0,.09),
                    0 1px 0 rgba(255,255,255,.9) inset;
  --sh-deep:        0 20px 60px rgba(0,0,0,.15),
                    0 8px 20px rgba(0,0,0,.10),
                    0 1px 0 rgba(255,255,255,.8) inset;
  --sh-btn:         0 2px 4px rgba(0,0,0,.20),
                    0 1px 2px rgba(0,0,0,.15),
                    0 1px 0 rgba(255,255,255,.35) inset;
  --sh-btn-hover:   0 4px 12px rgba(0,0,0,.20),
                    0 2px 4px rgba(0,0,0,.15),
                    0 1px 0 rgba(255,255,255,.30) inset;
  --sh-pressed:     inset 0 2px 6px rgba(0,0,0,.20),
                    inset 0 1px 3px rgba(0,0,0,.15);

  /* ── Typography ── */
  --f-h: 'Playfair Display', Georgia, serif;
  --f-b: 'DM Sans', system-ui, sans-serif;
  --f-m: 'JetBrains Mono', monospace;

  /* ── Motion ── */
  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}