/* ============================================================================
   NITESTORE — Storefront Design Tokens
   ============================================================================
   Single source of truth. One variable = one change = updates everywhere.

   QUICK RETHEME:
     --ns-accent-studio   Studio green  (tutorials, members)
     --ns-accent-gate     Gate teal     (gate product)
     --ns-accent          Main white    (general highlights)
   ============================================================================ */

/* ── FONTS ─────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Chakra Petch';
  src: url('https://cdn.nitestore.xyz/fonts/Chakra Petch/ChakraPetch-ExtraLight.woff2') format('woff2');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('https://cdn.nitestore.xyz/fonts/Chakra Petch/ChakraPetch-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('https://cdn.nitestore.xyz/fonts/Chakra Petch/ChakraPetch-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('https://cdn.nitestore.xyz/fonts/Chakra Petch/ChakraPetch-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('https://cdn.nitestore.xyz/fonts/Chakra Petch/ChakraPetch-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('https://cdn.nitestore.xyz/fonts/Chakra Petch/ChakraPetch-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('https://cdn.nitestore.xyz/fonts/Geist-Variable.woff2') format('woff2-variations'),
       url('https://cdn.nitestore.xyz/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('https://cdn.nitestore.xyz/fonts/GeistMono-Variable.woff2') format('woff2-variations'),
       url('https://cdn.nitestore.xyz/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {

  /* ── ACCENT COLOURS ──────────────────────────────────────────────────────
     Change the three source values. Derived values auto-follow.           */
  --ns-accent:               #ffffff;
  --ns-accent-on:            #000000;
  --ns-accent-studio:        #42DD13;
  --ns-accent-cta:           var(--ns-accent-studio);
  --ns-accent-gate:          #42DD13;

  /* Derived — do not edit */
  --ns-accent-studio-fade:   rgba(66, 221, 19, 0.06);
  --ns-accent-studio-border: rgba(66, 221, 19, 0.16);
  --ns-accent-gate-fade:     rgba(66, 221, 19, 0.06);
  --ns-accent-gate-border:   rgba(66, 221, 19, 0.16);

  /* ── BACKGROUNDS ─────────────────────────────────────────────────────── */
  --ns-bg:            #111111;
  --ns-bg-elevated:   #0b0b0b;
  --ns-bg-raised:     #0d0d0d;
  --ns-surface:       rgba(255, 255, 255, 0.035);
  --ns-surface-2:     rgba(255, 255, 255, 0.07);
  --ns-surface-bar:   #1a1a1a;
  --ns-surface-hover: rgba(255, 255, 255, 0.015);

  /* ── TEXT ────────────────────────────────────────────────────────────── */
  --ns-text:       #ffffff;
  --ns-text-2:     rgba(255, 255, 255, 0.45);
  --ns-text-3:     rgba(255, 255, 255, 0.35);
  --ns-text-dim:   rgba(255, 255, 255, 0.27);
  --ns-text-faint: rgba(255, 255, 255, 0.12);

  /* ── BORDERS ─────────────────────────────────────────────────────────── */
  --ns-border:        rgba(255, 255, 255, 0.07);
  --ns-border-2:      rgba(255, 255, 255, 0.14);
  --ns-border-subtle: rgba(255, 255, 255, 0.05);
  --ns-border-faint:  rgba(255, 255, 255, 0.04);

  /* ── TYPOGRAPHY — FONTS ──────────────────────────────────────────────── */
  --ns-font-display: 'Chakra Petch', system-ui, sans-serif;
  --ns-font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --ns-font-mono:    'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* ── TYPOGRAPHY — SIZE SCALE ─────────────────────────────────────────────
     Every size used on the site has its own token. Change a value here to
     resize that level everywhere it appears. No visual change on deploy —
     all values match current hardcoded sizes exactly.                     */
  --ns-text-size-micro:    7px;
  --ns-text-size-tiny:     8px;
  --ns-text-size-tag:      9px;
  --ns-text-size-xs:       10px;
  --ns-text-size-sm:       11px;
  --ns-text-size-base-sm:  12px;
  --ns-text-size-base:     13px;
  --ns-text-size-md:       14px;
  --ns-text-size-md-lg:    15px;
  --ns-text-size-lg:       16px;
  --ns-text-size-17:       17px;
  --ns-text-size-xl:       18px;
  --ns-text-size-19:       19px;
  --ns-text-size-xl-lg:    20px;
  --ns-text-size-2xl:      22px;
  --ns-text-size-24:       24px;
  --ns-text-size-26:       26px;
  --ns-text-size-3xl:      28px;
  --ns-text-size-display:  32px;
  --ns-text-size-36:       36px;

  /* ── BORDER RADIUS ───────────────────────────────────────────────────────
     Change a value here to restyle all elements of that type at once.
     Circles (50%) are intentional and not tokenised.                      */
  --ns-radius-card:  6px;    /* cards, panels, containers, modals         */
  --ns-radius-btn:   6px;    /* ALL buttons across the site               */
  --ns-radius-input: 4px;    /* inputs, selects, search, toggles          */
  --ns-radius-tag:   3px;    /* inline tags, badges, pill labels          */
  --ns-radius-sm:    2px;    /* micro UI: progress bars, waveform bars    */
  --ns-radius-pill:  50px;   /* fully rounded pill buttons and badges     */
  --ns-radius-lg:    8px;    /* medium containers, artwork, analytics     */
  --ns-radius-xl:    12px;   /* modals, drawers, auth walls               */
  --ns-radius:       var(--ns-radius-card); /* legacy alias               */

  /* ── SPACING ─────────────────────────────────────────────────────────── */
  --ns-sp-1: 4px;   --ns-sp-2: 8px;   --ns-sp-3: 12px;
  --ns-sp-4: 16px;  --ns-sp-5: 20px;  --ns-sp-6: 24px;
  --ns-sp-8: 32px;  --ns-sp-10: 40px; --ns-sp-12: 48px;

  /* ── LAYOUT ──────────────────────────────────────────────────────────── */
  --ns-sidebar-w: 48px;
  --ns-page-x:    18px;

  /* ── CARD HOVER EFFECT ───────────────────────────────────────────────────
     Adjust these to change all card hover effects at once.                */
  --ns-card-lift:   -4px;
  --ns-card-shadow: 0 12px 28px rgba(0,0,0,0.5);

  /* ── MOTION ──────────────────────────────────────────────────────────── */
  --ns-ease:      0.15s ease;
  --ns-ease-slow: 0.30s ease;

  /* ── STATUS ──────────────────────────────────────────────────────────── */
  --ns-success:        rgba(100, 200, 120, 0.9);
  --ns-success-bg:     rgba(100, 200, 120, 0.08);
  --ns-warn:           rgba(251, 191, 36, 0.9);
  --ns-warn-bg:        rgba(251, 191, 36, 0.08);
  --ns-warn-border:    rgba(251, 191, 36, 0.25);
  --ns-error:          rgba(220, 50, 50, 0.8);
  --ns-error-del:      rgba(200, 50, 50, 0.6);
  --ns-error-fade:     rgba(255, 100, 100, 0.4);
  --ns-error-bg:       rgba(255, 100, 100, 0.08);
  --ns-error-border:   rgba(255, 100, 100, 0.25);

  /* ── OVERLAY / SHADOW ────────────────────────────────────────────────── */
  --ns-overlay: rgba(0, 0, 0, 0.75);
  --ns-shadow:  rgba(0, 0, 0, 0.4);

  /* ── COMMUNITY CATEGORY COLOURS ──────────────────────────────────────── */
  --ns-cat-gen-border:       rgba(255, 255, 255, 0.20);
  --ns-cat-gen-color:        rgba(255, 255, 255, 0.65);
  --ns-cat-gen-bg:           rgba(255, 255, 255, 0.05);
  --ns-cat-gen-border-act:   rgba(255, 255, 255, 0.40);
  --ns-cat-gen-color-act:    rgba(255, 255, 255, 0.90);
  --ns-cat-gen-badge-bg:     rgba(255, 255, 255, 0.04);
  --ns-cat-gen-badge-color:  rgba(255, 255, 255, 0.40);
  --ns-cat-gen-badge-border: rgba(255, 255, 255, 0.10);
  --ns-cat-pro-border:       rgba(66, 221, 19, 0.25);
  --ns-cat-pro-color:        rgba(66, 221, 19, 0.65);
  --ns-cat-pro-bg:           rgba(66, 221, 19, 0.06);
  --ns-cat-tf-border:        rgba(255, 165, 0, 0.25);
  --ns-cat-tf-color:         rgba(255, 165, 0, 0.65);
  --ns-cat-tf-bg:            rgba(255, 165, 0, 0.07);
  --ns-cat-tf-border-act:    rgba(255, 165, 0, 0.50);
  --ns-cat-tf-color-act:     rgba(255, 165, 0, 0.90);
  --ns-cat-tf-badge-color:   rgba(255, 165, 0, 0.85);
  --ns-cat-tf-badge-border:  rgba(255, 165, 0, 0.20);
  --ns-cat-id-border:        rgba(100, 180, 255, 0.25);
  --ns-cat-id-color:         rgba(100, 180, 255, 0.65);
  --ns-cat-id-bg:            rgba(100, 180, 255, 0.07);
  --ns-cat-id-border-act:    rgba(100, 180, 255, 0.50);
  --ns-cat-id-color-act:     rgba(100, 180, 255, 0.90);
  --ns-cat-id-badge-color:   rgba(100, 180, 255, 0.85);
  --ns-cat-id-badge-border:  rgba(100, 180, 255, 0.20);
  --ns-cat-ot-border:        rgba(180, 100, 255, 0.25);
  --ns-cat-ot-color:         rgba(180, 100, 255, 0.65);
  --ns-cat-ot-bg:            rgba(180, 100, 255, 0.07);
  --ns-cat-ot-border-act:    rgba(180, 100, 255, 0.50);
  --ns-cat-ot-color-act:     rgba(180, 100, 255, 0.90);
  --ns-cat-ot-badge-color:   rgba(180, 100, 255, 0.85);
  --ns-cat-ot-badge-border:  rgba(180, 100, 255, 0.20);
}