/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto;}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}

*,*::before,*::after{box-sizing:border-box;}

/* ============================================================
   EWG Design Tokens — mapped as Tailwind-compatible CSS vars
   ============================================================
   Pinegrow reads this file and exposes these as custom
   properties in its Design panel. Each --tw-* alias lets you
   reference the brand tokens from Tailwind utility classes
   via arbitrary-value syntax, e.g.:
       bg-[var(--ewg-panel)]
       text-[var(--ewg-accent)]
       border-[var(--ewg-border2)]
   ============================================================ */

:root {
  /* ── Brand colour palette ──────────────────────────────── */
  --ewg-bg:       #04060f;
  --ewg-bg2:      #070b18;
  --ewg-panel:    #0a1020;
  --ewg-panel2:   #0d1528;
  --ewg-border:   #162038;
  --ewg-border2:  #1e3060;
  --ewg-accent:   #00d4ff;   /* primary cyan */
  --ewg-accent2:  #ff4060;   /* red / alert   */
  --ewg-accent3:  #7fff00;   /* lime / success */
  --ewg-gold:     #ffcc44;
  --ewg-text:     #ddebff;
  --ewg-muted:    #9cc8fa;
  --ewg-dim:      #c2c2e6;
  --ewg-solu:     #00ff2aeb;
  --ewg-glow:     0 0 24px rgba(0, 212, 255, 0.35);

  /* ── Forward-declared Tailwind custom-property aliases ─── *
   *  These names match what Tailwind's JIT engine can pick   *
   *  up via @layer base / CSS variable theming.              */
  --color-brand-bg:       var(--ewg-bg);
  --color-brand-bg2:      var(--ewg-bg2);
  --color-brand-panel:    var(--ewg-panel);
  --color-brand-panel2:   var(--ewg-panel2);
  --color-brand-border:   var(--ewg-border);
  --color-brand-border2:  var(--ewg-border2);
  --color-brand-accent:   var(--ewg-accent);
  --color-brand-accent2:  var(--ewg-accent2);
  --color-brand-accent3:  var(--ewg-accent3);
  --color-brand-gold:     var(--ewg-gold);
  --color-brand-text:     var(--ewg-text);
  --color-brand-muted:    var(--ewg-muted);
  --color-brand-dim:      var(--ewg-dim);

  /* ── Spacing scale (mirrors style.css --sp-* values) ───── */
  --spacing-1:  4px;
  --spacing-2:  8px;
  --spacing-3:  12px;
  --spacing-4:  16px;
  --spacing-5:  24px;
  --spacing-6:  32px;
  --spacing-7:  48px;
  --spacing-8:  64px;
  --spacing-9:  96px;
  --spacing-10: 128px;

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: "Orbitron", monospace;
  --font-mono:    "Share Tech Mono", monospace;
  --font-body:    "Rajdhani", sans-serif;

  /* ── Legacy names kept for backward compat with theme.css  */
  --primary:   var(--ewg-accent);
  --secondary: #6c757d;
  --color3:    var(--ewg-accent);
  --color4:    var(--ewg-accent3);
  --white:     white;
  --light:     #f8f9fa;
  --dark:      #212529;
}

body, html {
  min-height: 100vh;
}

/* ============================================================
   Tailwind @layer base — expose brand palette as Tailwind
   colour utilities so Pinegrow's class picker lists them.

   Usage in HTML:
     class="bg-brand-bg text-brand-accent border-brand-border2"

   NOTE: This block only activates when Tailwind's PostCSS
   plugin (or Pinegrow's Tailwind integration) processes the
   file. In a plain HTML project it is harmless and ignored.
   ============================================================ */
@layer base {
  :root {
    --tw-color-brand-bg:      #04060f;
    --tw-color-brand-bg2:     #070b18;
    --tw-color-brand-panel:   #0a1020;
    --tw-color-brand-panel2:  #0d1528;
    --tw-color-brand-border:  #162038;
    --tw-color-brand-border2: #1e3060;
    --tw-color-brand-accent:  #00d4ff;
    --tw-color-brand-accent2: #ff4060;
    --tw-color-brand-accent3: #7fff00;
    --tw-color-brand-gold:    #ffcc44;
    --tw-color-brand-text:    #ddebff;
    --tw-color-brand-muted:   #9cc8fa;
    --tw-color-brand-dim:     #c2c2e6;
  }
}

/* ============================================================
   Tailwind config hint (paste into tailwind.config.js)
   ============================================================

   module.exports = {
     theme: {
       extend: {
         colors: {
           'brand-bg':      'var(--ewg-bg)',
           'brand-bg2':     'var(--ewg-bg2)',
           'brand-panel':   'var(--ewg-panel)',
           'brand-panel2':  'var(--ewg-panel2)',
           'brand-border':  'var(--ewg-border)',
           'brand-border2': 'var(--ewg-border2)',
           'brand-accent':  'var(--ewg-accent)',
           'brand-accent2': 'var(--ewg-accent2)',
           'brand-accent3': 'var(--ewg-accent3)',
           'brand-gold':    'var(--ewg-gold)',
           'brand-text':    'var(--ewg-text)',
           'brand-muted':   'var(--ewg-muted)',
           'brand-dim':     'var(--ewg-dim)',
         },
         fontFamily: {
           display: ['"Orbitron"', 'monospace'],
           mono:    ['"Share Tech Mono"', 'monospace'],
           body:    ['"Rajdhani"', 'sans-serif'],
         },
         spacing: {
           '18': '72px',
           '22': '88px',
         },
       },
     },
   };

   ============================================================ */