/* ============================================================
   NOTICED ON SITE ELECTRIC — Design Tokens
   tokens.css
   ============================================================ */

:root {

  /* ── Backgrounds ──────────────────────────────────────── */
  --bg-primary:    #0C0C0C;
  --bg-secondary:  #111111;
  --bg-card:       #161616;
  --bg-card-hover: #1C1C1C;
  --bg-elevated:   #1E1E1E;

  /* ── Borders ──────────────────────────────────────────── */
  --border:        #222222;
  --border-light:  #303030;
  --border-strong: #444444;

  /* ── Text ─────────────────────────────────────────────── */
  --text-primary:   #F2F2F2;
  --text-secondary: #A3A3A3;
  --text-muted:     #5C5C5C;
  --text-inverse:   #0C0C0C;

  /* ── Accent — Amber ───────────────────────────────────── */
  --accent:          #F59E0B;
  --accent-hover:    #D97706;
  --accent-light:    #FCD34D;
  --accent-dim:      rgba(245, 158, 11, 0.08);
  --accent-glow:     rgba(245, 158, 11, 0.15);
  --accent-border:   rgba(245, 158, 11, 0.22);
  --accent-shadow:   rgba(245, 158, 11, 0.30);

  /* ── Functional ───────────────────────────────────────── */
  --success: #10B981;
  --error:   #EF4444;
  --warning: #F59E0B;

  /* ── Typography ───────────────────────────────────────── */
  --font-heading: 'DM Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.8125rem;  /*  13px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */
  --text-5xl:  3rem;       /*  48px */
  --text-6xl:  3.75rem;    /*  60px */
  --text-7xl:  4.5rem;     /*  72px */
  --text-8xl:  6rem;       /*  96px */

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --tracking-tight: -0.03em;
  --tracking-snug:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.15em;

  /* ── Spacing (8px base) ───────────────────────────────── */
  --space-1:  0.25rem;   /*   4px */
  --space-2:  0.5rem;    /*   8px */
  --space-3:  0.75rem;   /*  12px */
  --space-4:  1rem;      /*  16px */
  --space-5:  1.25rem;   /*  20px */
  --space-6:  1.5rem;    /*  24px */
  --space-8:  2rem;      /*  32px */
  --space-10: 2.5rem;    /*  40px */
  --space-12: 3rem;      /*  48px */
  --space-16: 4rem;      /*  64px */
  --space-20: 5rem;      /*  80px */
  --space-24: 6rem;      /*  96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */

  /* ── Layout ───────────────────────────────────────────── */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-narrow: 760px;
  --container-pad: var(--space-6);

  /* ── Radius ───────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.6);
  --shadow-accent: 0 8px 32px var(--accent-shadow);
  --shadow-accent-sm: 0 4px 16px var(--accent-glow);

  /* ── Transitions ──────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);

  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --duration-slower: 500ms;

  /* ── Z-Index ──────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}