/* ─────────────────────────────────────────
   CraftStore — CSS Variables & Reset
   ───────────────────────────────────────── */

/* TTNorms Pro — loaded via CDN stub (replace with licensed copy in production) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

/* TTNorms fallback stack — if you have the font files, place them in /fonts/ and uncomment:
@font-face { font-family: 'TTNorms'; src: url('../fonts/TTNorms-Regular.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'TTNorms'; src: url('../fonts/TTNorms-Medium.woff2')  format('woff2'); font-weight: 500; }
@font-face { font-family: 'TTNorms'; src: url('../fonts/TTNorms-Bold.woff2')    format('woff2'); font-weight: 700; }
@font-face { font-family: 'TTNorms'; src: url('../fonts/TTNorms-ExtraBold.woff2') format('woff2'); font-weight: 800; }
@font-face { font-family: 'TTNorms'; src: url('../fonts/TTNorms-Black.woff2')   format('woff2'); font-weight: 900; }
*/

:root {
  /* Colors */
  --bg:           #07090c;
  --bg-2:         #0c1117;
  --surface:      #111820;
  --surface-2:    #182030;
  --border:       rgba(255, 255, 255, 0.06);
  --border-md:    rgba(255, 255, 255, 0.1);
  --border-hover: rgba(74, 222, 128, 0.35);

  --green:        #4ade80;
  --green-light:  #86efac;
  --green-dim:    #16a34a;
  --green-glow:   rgba(74, 222, 128, 0.12);
  --green-glow-lg:rgba(74, 222, 128, 0.06);

  --cyan:         #22d3ee;
  --amber:        #fbbf24;
  --red:          #f87171;
  --violet:       #a78bfa;

  --text:         #dde4ee;
  --text-dim:     #8896aa;
  --text-muted:   #4b5a6e;

  /* Typography — TTNorms Pro (web-safe fallback: Nunito) */
  --font-display: 'TTNorms', 'Nunito', sans-serif;
  --font-mono:    'DM Mono', 'Space Mono', monospace;

  /* Spacing */
  --nav-h:        68px;
  --section-px:   clamp(20px, 5vw, 80px);

  /* Radius */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;

  /* Shadows */
  --shadow-card:  0 1px 0 var(--border), 0 4px 32px rgba(0,0,0,0.4);
  --shadow-glow:  0 0 40px rgba(74, 222, 128, 0.2);

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: var(--font-display); }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-dim); }

/* Selection */
::selection { background: rgba(74, 222, 128, 0.2); color: var(--green-light); }