/* ============================================
   POWER ATLAS — Design Tokens
   Copper + Obsidian. Wide canvas. Atlas of systems.
   ============================================ */

:root {
  /* ========================================
     MATERIAL PALETTE
     Named like a jeweler. No pure black/white.
     ======================================== */
  --vellum:           #F1EBE0;  /* aged map paper */
  --vellum-deep:      #E8DFD0;  /* shadowed paper */
  --vellum-edge:      #D4C8B5;  /* paper edge */
  --parchment:        #FAF6EE;  /* lighter paper */

  --obsidian:         #1A1614;  /* velvet dark */
  --obsidian-deep:    #0F0C0A;  /* deepest */
  --obsidian-soft:    #25201D;  /* surface */
  --obsidian-edge:    #322B27;  /* border */

  --iron:             #2A2422;  /* primary text on light */
  --iron-light:       #5A4F49;  /* secondary text */
  --iron-faint:       #8A7E76;  /* tertiary text */

  --copper:           #B87333;  /* primary accent */
  --copper-bright:    #D88A3F;  /* hover */
  --copper-deep:      #8E5523;  /* pressed */
  --copper-glow:      rgba(184, 115, 51, 0.15);
  --brass:            #9A7B2E;  /* secondary metal */
  --brass-bright:     #C19A3F;
  --patina:           #4A7C6E;  /* weathered copper */

  /* ========================================
     ELECTRICAL VARIABLES (color-coded)
     Voltage = blue. Current = red. Power = green.
     Carried into every formula and diagram.
     ======================================== */
  --v-color:          #1E5A8C;  /* voltage — schematic blue */
  --v-glow:           rgba(30, 90, 140, 0.12);
  --i-color:          #B33A2A;  /* current — warm red */
  --i-glow:           rgba(179, 58, 42, 0.12);
  --p-color:          #3F7A4D;  /* power — forest green */
  --p-glow:           rgba(63, 122, 77, 0.12);
  --q-color:          #B5821E;  /* reactive — amber/brass */
  --s-color:          #6E4B8C;  /* apparent — purple */
  --z-color:          #2A2422;  /* impedance — iron */
  --pf-color:         #B5821E;  /* power factor — amber */

  /* ========================================
     SEMANTIC
     ======================================== */
  --danger:           #A2342B;  /* arc flash, fault */
  --danger-glow:      rgba(162, 52, 43, 0.12);
  --success:          #4A7C59;  /* energized OK */
  --warning:          #B5821E;  /* derate, caution */
  --info:             #1E5A8C;
  --critical:         #6E1B16;  /* fault current */

  /* ========================================
     SURFACES — Light mode (default)
     ======================================== */
  --bg:               var(--vellum);
  --bg-deep:          var(--vellum-edge);
  --surface:          var(--parchment);
  --surface-raised:   #FFFFFE;
  --surface-inset:    var(--vellum-deep);
  --border:           #C8BCA8;
  --border-strong:    #A89876;
  --border-faint:     #DDD2BE;
  --text:             var(--iron);
  --text-light:       var(--iron-light);
  --text-faint:       var(--iron-faint);
  --accent:           var(--copper);
  --accent-bright:    var(--copper-bright);

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --font-display:     'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  --text-2xs:         0.6875rem;
  --text-xs:          0.75rem;
  --text-sm:          0.8125rem;
  --text-base:        0.9375rem;
  --text-md:          1rem;
  --text-lg:          1.125rem;
  --text-xl:          1.375rem;
  --text-2xl:         1.75rem;
  --text-3xl:         2.25rem;
  --text-4xl:         3rem;
  --text-5xl:         4rem;

  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.55;
  --leading-loose:    1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;

  /* ========================================
     SPACING
     ======================================== */
  --sp-1:             0.25rem;
  --sp-2:             0.5rem;
  --sp-3:             0.75rem;
  --sp-4:             1rem;
  --sp-5:             1.5rem;
  --sp-6:             2rem;
  --sp-7:             2.5rem;
  --sp-8:             3.5rem;
  --sp-9:             5rem;
  --sp-10:            7rem;

  /* ========================================
     LAYOUT — wide canvas, three-column
     ======================================== */
  --nav-h:            56px;
  --toc-w:            240px;
  --reference-w:      300px;
  --canvas-max:       1680px;
  --content-max:      1140px;
  --gutter:           1.5rem;

  /* ========================================
     RADII / SHADOWS / MOTION
     ======================================== */
  --r-sm:             3px;
  --r-md:             6px;
  --r-lg:             10px;
  --r-xl:             16px;

  --sh-sm:            0 1px 2px rgba(42, 36, 34, 0.06);
  --sh-md:            0 2px 8px rgba(42, 36, 34, 0.08);
  --sh-lg:            0 8px 24px rgba(42, 36, 34, 0.12);
  --sh-xl:            0 16px 48px rgba(42, 36, 34, 0.16);
  --sh-inset:         inset 0 1px 2px rgba(42, 36, 34, 0.08);
  --sh-copper-glow:   0 0 0 3px var(--copper-glow);

  --ease:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:        cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:           120ms;
  --t-base:           220ms;
  --t-slow:           400ms;

  /* ========================================
     Z-LAYERS
     ======================================== */
  --z-sticky:         20;
  --z-toc:            30;
  --z-nav:            40;
  --z-modal:          50;
}

/* ========================================
   DARK MODE — Obsidian + Copper
   ======================================== */
:root.dark {
  --bg:               var(--obsidian);
  --bg-deep:          var(--obsidian-deep);
  --surface:          var(--obsidian-soft);
  --surface-raised:   #2D2724;
  --surface-inset:    var(--obsidian-deep);
  --border:           var(--obsidian-edge);
  --border-strong:    #4A413B;
  --border-faint:     #2A2522;
  --text:             #E8DFD0;
  --text-light:       #B5A99A;
  --text-faint:       #7A6E63;
  --accent:           var(--copper-bright);
  --accent-bright:    #E89F4F;

  --v-color:          #5DA0D4;
  --v-glow:           rgba(93, 160, 212, 0.15);
  --i-color:          #E07058;
  --i-glow:           rgba(224, 112, 88, 0.15);
  --p-color:          #6FAA7E;
  --p-glow:           rgba(111, 170, 126, 0.15);
  --q-color:          #D9A347;
  --s-color:          #9C7BC4;
  --z-color:          #E8DFD0;
  --pf-color:         #D9A347;

  --danger:           #D9594C;
  --success:          #6FAA7E;
  --warning:          #D9A347;
  --critical:         #B33A2A;

  --sh-sm:            0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-md:            0 2px 8px rgba(0, 0, 0, 0.4);
  --sh-lg:            0 8px 24px rgba(0, 0, 0, 0.5);
  --sh-xl:            0 16px 48px rgba(0, 0, 0, 0.6);
}