/* ============================================================
   FUNK-IT TOOLKIT — CSS Variables
   Sourced from portfolio-constants.html (Funk-IT Web Design)
   Edit here to retheme the entire site.
   ============================================================ */

:root {

  /* ── Core Brand Colors ── */
  --c-bg:           #fef5df;        /* Page background (warm cream) */
  --c-card:         #3E4E63;        /* Card / panel background (dark slate-blue) */
  --c-text-light:   #F2F6FA;        /* Text on dark backgrounds */
  --c-text-dark:    #1a2740;        /* Text on light backgrounds */
  --c-text-muted:   #6b7a90;        /* Muted / secondary text */

  /* ── Accent Colors ── */
  --c-orange:       #F96A22;        /* Primary accent — orange */
  --c-gold:         #F5BB2E;        /* Secondary accent — gold/yellow */
  --c-rose:         #B9556C;        /* Border highlight — dusty rose */
  --c-teal:         #6499AC;        /* Hover state — muted teal */

  /* ── Category Colors (for card top borders) ── */
  --c-cat-finance:  #b87c2e;        /* Finance & Crypto — warm gold */
  --c-cat-design:   #F96A22;        /* Website Design — orange */
  --c-cat-tech:     #6499AC;        /* Tech & Devices — teal */

  /* ── Status Colors ── */
  --c-live:         #2e7d32;        /* Live badge — green */
  --c-coming:       #78909c;        /* Coming soon badge — slate */

  /* ── Shadow ── */
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.15);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.22);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.30);
  --shadow-card:    0 4px 20px rgba(0,0,0,0.28);

  /* ── Typography ── */
  --font-display:   'Shrikhand', serif;
  --font-body:      'Open Sans', sans-serif;

  /* ── Border Radius ── */
  --radius-xs:      0.3rem;
  --radius-sm:      0.5rem;
  --radius-md:      0.8rem;
  --radius-lg:      1rem;
  --radius-xl:      1.4rem;

  /* ── Spacing Scale ── */
  --sp-xs:  0.4rem;
  --sp-sm:  0.75rem;
  --sp-md:  1.25rem;
  --sp-lg:  2rem;
  --sp-xl:  3.5rem;
  --sp-2xl: 5rem;

  /* ── Layout ── */
  --max-width:      1100px;
  --section-gap:    4rem;

  /* ── Transitions ── */
  --transition-fast:  0.15s ease;
  --transition-base:  0.25s ease;
  --transition-slow:  0.4s ease;

}