/* ============================================================
   Design Tokens — Bigyan Ghimire Portfolio
   Single source of truth for spacing, type, radius, shadow and
   the light/dark colour palette. Loaded BEFORE style.css.
   ============================================================ */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Brand */
  --primary:       #5B50E8;
  --primary-dark:  #4640C4;
  --primary-light: #EEF0FF;
  --accent:        #E85B5B;
  --accent-light:  #FFF0F0;
  --teal:          #1ABCB4;
  --green:         #27AE60;
  --green-light:   #E8F8EE;
  --gold:          #F5A623;

  /* Surfaces */
  --bg:            #F7F8FC;
  --surface:       #FFFFFF;
  --surface-alt:   #F0F1FA;
  --white:         #FFFFFF;

  /* Text */
  --text:          #1C1C2E;
  --text-sub:      #4A4A6A;
  --text-muted:    #9090AA;
  --text-on-brand: #FFFFFF;

  /* Borders */
  --border:        #E4E6F0;
  --border-dark:   #C8CBDD;

  /* Shadows */
  --shadow-sm:     0 2px 10px rgba(91,80,232,.07);
  --shadow-md:     0 6px 24px rgba(91,80,232,.12);
  --shadow-lg:     0 16px 50px rgba(91,80,232,.15);

  /* Footer / dark surface (always dark, in both themes) */
  --footer-bg:     #0D0D1C;
  --footer-text:   rgba(255,255,255,.62);

  /* Header glass */
  --glass-bg:       rgba(255,255,255,.72);
  --glass-border:   rgba(28,28,46,.07);
  --glass-shadow:   0 8px 32px rgba(28,28,46,.08);

  /* Scale */
  --radius-sm:  10px;
  --radius:     14px;
  --radius-lg:  22px;
  --radius-xl:  30px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --tr-fast: all .18s ease;
  --tr:      all .28s ease;
  --tr-slow: all .5s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --primary:       #8B82FF;
  --primary-dark:  #6E63F0;
  --primary-light: rgba(139,130,255,.16);
  --accent:        #FF7A7A;
  --accent-light:  rgba(255,122,122,.14);
  --teal:          #2DD9CE;
  --green:         #3ED88A;
  --green-light:   rgba(62,216,138,.14);
  --gold:          #FBBF3E;

  --bg:            #0A0A13;
  --surface:       #15152A;
  --surface-alt:   #1C1C33;
  --white:         #FFFFFF;

  --text:          #F1F1FA;
  --text-sub:      #B4B4CC;
  --text-muted:    #7C7C9A;
  --text-on-brand: #FFFFFF;

  --border:        #29293F;
  --border-dark:   #38384E;

  --shadow-sm:     0 2px 10px rgba(0,0,0,.28);
  --shadow-md:     0 6px 24px rgba(0,0,0,.36);
  --shadow-lg:     0 16px 50px rgba(0,0,0,.46);

  --footer-bg:     #05050c;
  --footer-text:   rgba(255,255,255,.62);

  --glass-bg:       rgba(21,21,42,.62);
  --glass-border:   rgba(255,255,255,.08);
  --glass-shadow:   0 8px 32px rgba(0,0,0,.45);
}

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}