/* ============================================================
   TRADESLOOK — DESIGN TOKENS
   Source of truth for all 6 trade templates.
   Part of the TradesXL product family.

   Sibling brand colors:
     TradesXL    → Gold   #FFD000
     TradesLogic → Blue   #29abe2
     TradesLook  → Purple #8A4FFF  ← this file
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Inter:wght@400;500;600&display=swap');

:root {

  /* ── COLOR: BASE (shared across all TradesXL siblings) ── */
  --color-bg:          #0e0e0e;   /* Iron Black — page background       */
  --color-surface:     #1a1a1a;   /* Lifted surface — cards, sections   */
  --color-surface-hi:  #1f1f1f;   /* Higher card surface                */
  --color-border:      #2a2a2a;   /* Subtle dividers                    */
  --color-border-hi:   #3a3a3a;   /* Emphasized borders, hover states   */
  --color-off-white:   #F0EFEB;   /* Primary text                       */
  --color-white:       #FFFFFF;   /* Pure white — headlines, icons      */
  --color-gray:        #8A8A8A;   /* Secondary / muted text             */
  --color-green:       #00C864;   /* Status: live / success             */
  --color-red:         #e03c3c;   /* Status: error / warning            */

  /* ── COLOR: TRADESLOOK ACCENT (purple) ── */
  --color-accent:      #8A4FFF;   /* Primary CTA, highlights, links     */
  --color-accent-dim:  #6B35D9;   /* Hover state, pressed state         */
  --color-accent-glow: rgba(138, 79, 255, 0.14); /* Glow / tint overlays */
  --color-accent-border: rgba(138, 79, 255, 0.30); /* Subtle accent borders */

  /* ── COLOR: GOLD (inherited from parent — use sparingly) ── */
  --color-gold:        #FFD000;   /* TradesXL parent brand — nav badge only */
  --color-gold-dim:    #C9A300;

  /* ── TYPOGRAPHY ── */
  --font-head: 'Montserrat', sans-serif;  /* Headlines — 700, 900 only  */
  --font-body: 'Inter', sans-serif;       /* Body, UI — 400, 500, 600   */

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Type scale — fluid where appropriate */
  --text-xs:   0.62rem;   /* 9.9px  — tags, eyebrows                  */
  --text-sm:   0.72rem;   /* 11.5px — nav links, fine print            */
  --text-base: 0.82rem;   /* 13.1px — buttons, labels                  */
  --text-md:   1rem;      /* 16px   — body copy                        */
  --text-lg:   1.25rem;   /* 20px   — subheadlines                     */
  --text-xl:   clamp(1.9rem, 3.6vw, 2.9rem);  /* Section headlines     */
  --text-hero: clamp(2.8rem, 6vw, 5rem);       /* Hero H1               */

  /* Letter spacing */
  --ls-tight:  -0.02em;   /* Hero/display headlines */
  --ls-normal:  0em;
  --ls-wide:    0.06em;   /* Wordmarks, nav */
  --ls-wider:   0.08em;   /* Buttons */
  --ls-widest:  0.15em;   /* Tags, eyebrows */
  --ls-ultra:   0.22em;   /* Section labels */

  /* Line heights */
  --lh-tight:  1.08;   /* Display type */
  --lh-head:   1.1;    /* Section headlines */
  --lh-body:   1.6;    /* Body copy */
  --lh-loose:  1.75;   /* Long-form subtext */

  /* ── SPACING ── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   28px;
  --space-7:   40px;
  --space-8:   64px;
  --space-9:   88px;
  --space-10: 120px;

  /* Section padding shorthand */
  --section-pad: 88px 24px;
  --section-pad-lg: 120px 24px;

  /* ── LAYOUT ── */
  --max-w:        1200px;
  --container-px: 24px;
  --nav-h:        64px;

  /* ── BORDER RADIUS ── */
  --r-xs:  2px;    /* Sharp — tags, badges      */
  --r-sm:  3px;    /* Buttons, inputs           */
  --r-md:  8px;    /* Cards                     */
  --r-lg:  14px;   /* Large cards, modals       */
  --r-full: 999px; /* Pills                     */

  /* ── TRANSITIONS ── */
  --t-fast:   0.15s ease;
  --t:        0.22s ease;
  --t-slow:   0.35s ease;

  /* ── SHADOWS / GLOWS ── */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.25);
  --glow-accent: 0 0 24px rgba(138, 79, 255, 0.25);

  /* ── Z-INDEX SCALE ── */
  --z-base:    1;
  --z-card:   10;
  --z-nav:   100;
  --z-modal: 200;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-off-white);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-head);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.eyebrow {
  font-family: var(--font-head);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 14px;
}

.section-headline {
  font-family: var(--font-head);
  font-size: var(--text-xl);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-white);
  line-height: var(--lh-tight);
  margin-bottom: 14px;
}

.section-sub {
  font-size: var(--text-md);
  color: var(--color-gray);
  line-height: var(--lh-loose);
}

/* ============================================================
   TAGS / BADGES
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-head);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-xs);
  border: 1px solid;
}

.tag--accent  { color: var(--color-accent); border-color: var(--color-accent-border); background: var(--color-accent-glow); }
.tag--green   { color: var(--color-green);  border-color: rgba(0,200,100,0.3);  background: rgba(0,200,100,0.08); }
.tag--gray    { color: var(--color-gray);   border-color: rgba(138,138,138,0.25); background: rgba(138,138,138,0.08); }
.tag--gold    { color: var(--color-gold);   border-color: rgba(255,208,0,0.3);  background: rgba(255,208,0,0.08); }

/* Live pulse dot */
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-green);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  transition: filter var(--t), transform var(--t), background var(--t), color var(--t), border-color var(--t);
}

/* Primary — Purple fill */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--primary:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

/* Secondary — Ghost outline */
.btn--ghost {
  background: transparent;
  color: var(--color-off-white);
  border: 1px solid var(--color-border-hi);
}
.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Large modifier */
.btn--lg { padding: 18px 40px; font-size: 0.92rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: rgba(14, 14, 14, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-px);
  height: 100%;
}

/* Logo mark — purple square with initial */
.nav__mark {
  width: 34px; height: 34px;
  background: var(--color-accent);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav__mark span {
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  font-size: 1rem;
  color: var(--color-white);
  letter-spacing: -0.03em;
}

.nav__wordmark {
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  font-size: 0.9rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-off-white);
}
.nav__wordmark em {
  color: var(--color-accent);
  font-style: normal;
}

.nav__parent {
  font-family: var(--font-head);
  font-size: 0.58rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-gray);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav__links a {
  font-family: var(--font-head);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gray);
  transition: color var(--t-fast);
}
.nav__links a:hover { color: var(--color-accent); }