/* ==============================================
   Design Tokens — Winni's 3D & Laserservice
   ============================================== */

:root {
  /* ---- Colors ---- */
  --black:        #0a0a0a;
  --dark-1:       #111111;
  --dark-2:       #1a1a1a;
  --dark-3:       #222222;
  --dark-4:       #2a2a2a;

  --orange:       #e8a020;
  --orange-light: #f0b030;
  --orange-dim:   rgba(232, 160, 32, .15);

  --blue:         #1a5fb4;
  --blue-light:   #2563eb;

  --red:          #dc2626;
  --red-light:    #ef4444;

  --white:        #ffffff;
  --silver:       #f0f0f0;
  --gray:         #999999;
  --gray-dark:    #666666;

  /* ---- Gradients ---- */
  --grad-orange:  linear-gradient(135deg, var(--orange), var(--orange-light));
  --grad-blue:    linear-gradient(135deg, var(--blue), var(--blue-light));
  --grad-red:     linear-gradient(135deg, var(--red), var(--red-light));

  /* ---- Typography ---- */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-xs:   clamp(.75rem, .7rem + .25vw, .8125rem);
  --fs-sm:   clamp(.8125rem, .75rem + .3125vw, .9375rem);
  --fs-base: clamp(.9375rem, .875rem + .3125vw, 1.0625rem);
  --fs-md:   clamp(1.0625rem, .95rem + .5vw, 1.25rem);
  --fs-lg:   clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  --fs-xl:   clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --fs-2xl:  clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-3xl:  clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);

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

  --lh-tight:  1.2;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* ---- Spacing ---- */
  --sp-xs:  .25rem;
  --sp-sm:  .5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;
  --sp-4xl: 6rem;
  --sp-5xl: 8rem;

  /* ---- Layout ---- */
  --max-width:   1280px;
  --nav-height:  72px;
  --border-radius: 12px;
  --br-sm:       8px;
  --br-lg:       16px;
  --br-xl:       24px;
  --br-full:     9999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.25);
  --shadow-md:  0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.45);
  --shadow-glow-orange: 0 0 20px rgba(232,160,32,.25);
  --shadow-glow-red:    0 0 20px rgba(220,38,38,.3);
  --shadow-glow-blue:   0 0 20px rgba(37,99,235,.25);

  /* ---- Transitions ---- */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-snap: cubic-bezier(.5, 0, 0, 1);
  --dur-fast:  .2s;
  --dur-base:  .35s;
  --dur-slow:  .6s;
}

/* ==============================================
   Light Theme
   ============================================== */
[data-theme="light"] {
  --black:        #fafafa;
  --dark-1:       #f0f0f0;
  --dark-2:       #e6e6e6;
  --dark-3:       #d0d0d0;
  --dark-4:       #b8b8b8;

  --white:        #111111;
  --silver:       #222222;
  --gray:         #555555;
  --gray-dark:    #888888;

  --orange:       #c07500;
  --orange-light: #d08500;
  --orange-dim:   rgba(192, 117, 0, .08);

  --shadow-sm:  0 1px 4px rgba(0,0,0,.06);
  --shadow-md:  0 2px 10px rgba(0,0,0,.08);
  --shadow-lg:  0 4px 20px rgba(0,0,0,.1);
  --shadow-glow-orange: 0 0 15px rgba(192,117,0,.15);
  --shadow-glow-red:    0 0 15px rgba(220,38,38,.12);
  --shadow-glow-blue:   0 0 15px rgba(37,99,235,.12);
}