/* ============================================
   DESIGN TOKENS — Detailing Studio 2026
   Soft Brutalism Design System
   ============================================ */

:root {
  /* ---- COLOR PALETTE ---- */
  --c-black:        #0a0a0a;
  --c-graphite:     #1a1a1a;
  --c-dark:         #222222;
  --c-charcoal:     #2d2d2d;
  --c-steel:        #3a3a3a;
  --c-gray-700:     #555555;
  --c-gray-500:     #888888;
  --c-gray-400:     #aaaaaa;
  --c-gray-300:     #cccccc;
  --c-gray-200:     #e0e0e0;
  --c-gray-100:     #f0f0f0;
  --c-white:        #fafafa;
  --c-pure-white:   #ffffff;

  /* Accent — acid lime */
  --c-accent:       #c8ff00;
  --c-accent-rgb:   200, 255, 0;
  --c-accent-dim:   #a8d600;
  --c-accent-glow:  rgba(200, 255, 0, 0.15);
  --c-accent-ghost: rgba(200, 255, 0, 0.06);

  /* Semantic */
  --c-bg:           var(--c-black);
  --c-bg-elevated:  var(--c-graphite);
  --c-bg-card:      var(--c-dark);
  --c-bg-card-hover:var(--c-charcoal);
  --c-surface:      var(--c-steel);
  --c-text:         var(--c-gray-100);
  --c-text-muted:   var(--c-gray-500);
  --c-text-dim:     var(--c-gray-400);
  --c-border:       var(--c-charcoal);
  --c-border-hover: var(--c-gray-700);
  --c-overlay:      rgba(10, 10, 10, 0.85);

  /* ---- TYPOGRAPHY ---- */
  --ff-heading:     'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ff-body:        'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ff-mono:        'JetBrains Mono', 'Fira Code', monospace;

  /* Font sizes — fluid */
  --fs-hero:        clamp(3.2rem, 8vw, 7.5rem);
  --fs-hero-sub:    clamp(1.1rem, 2vw, 1.5rem);
  --fs-h1:          clamp(2.4rem, 5vw, 4.5rem);
  --fs-h2:          clamp(1.8rem, 3.5vw, 3rem);
  --fs-h3:          clamp(1.3rem, 2.5vw, 1.8rem);
  --fs-h4:          clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body:        clamp(0.95rem, 1.2vw, 1.1rem);
  --fs-small:       clamp(0.8rem, 1vw, 0.9rem);
  --fs-xs:          clamp(0.7rem, 0.8vw, 0.8rem);
  --fs-badge:       0.7rem;

  /* Font weights */
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-black:       900;

  /* Line heights */
  --lh-tight:       1.05;
  --lh-heading:     1.15;
  --lh-body:        1.6;
  --lh-loose:       1.8;

  /* Letter spacing */
  --ls-tight:       -0.03em;
  --ls-normal:      0;
  --ls-wide:        0.05em;
  --ls-ultra:       0.12em;

  /* ---- SPACING SCALE ---- */
  --sp-2xs:         0.25rem;   /* 4px */
  --sp-xs:          0.5rem;    /* 8px */
  --sp-sm:          0.75rem;   /* 12px */
  --sp-md:          1rem;      /* 16px */
  --sp-lg:          1.5rem;    /* 24px */
  --sp-xl:          2rem;      /* 32px */
  --sp-2xl:         3rem;      /* 48px */
  --sp-3xl:         4rem;      /* 64px */
  --sp-4xl:         6rem;      /* 96px */
  --sp-5xl:         8rem;      /* 128px */
  --sp-section:     clamp(4rem, 10vw, 8rem);

  /* ---- BORDERS & RADIUS ---- */
  --radius-none:    0;
  --radius-xs:      2px;
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --radius-full:    9999px;

  --border-thin:    1px solid var(--c-border);
  --border-medium:  2px solid var(--c-border);
  --border-thick:   3px solid var(--c-border);
  --border-accent:  2px solid var(--c-accent);

  /* ---- SHADOWS ---- */
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:      0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:      0 8px 40px rgba(0,0,0,0.5);
  --shadow-accent:  0 0 30px rgba(200, 255, 0, 0.08);
  --shadow-lift:    0 12px 40px rgba(0,0,0,0.6);

  /* ---- TRANSITIONS ---- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.25, 0.1, 0.25, 1);

  --dur-fast:       150ms;
  --dur-normal:     200ms;
  --dur-slow:       350ms;
  --dur-reveal:     600ms;

  /* ---- LAYOUT ---- */
  --container-max:  1320px;
  --container-wide: 1440px;
  --container-narrow: 860px;
  --gutter:         clamp(1rem, 3vw, 2rem);

  /* ---- Z-INDEX ---- */
  --z-base:         1;
  --z-card:         10;
  --z-sticky:       100;
  --z-dropdown:     200;
  --z-fab:          700;
  --z-header:       800;
  --z-overlay:      900;
  --z-modal:        1000;
  --z-cursor:       9999;

  /* ---- MISC ---- */
  --header-h:       80px;
  --header-h-shrink: 60px;
  --fab-size:       56px;
}

/* Dark theme is default — light theme override if needed */
[data-theme="light"] {
  --c-bg:           var(--c-gray-100);
  --c-bg-elevated:  var(--c-pure-white);
  --c-bg-card:      var(--c-pure-white);
  --c-text:         var(--c-graphite);
  --c-text-muted:   var(--c-gray-700);
  --c-border:       var(--c-gray-200);
}