/* ============================================================
   ClawdWorks — Color & Type Tokens
   Canonical source: source/index.html (neon cyan/magenta spec)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  /* ---------- Color: base surface ---------- */
  --cw-bg:            #0a0e14;  /* near-black navy, canonical body bg */
  --cw-bg-deep:       #06060b;  /* deepest panel */
  --cw-bg-panel:      #0f141a;  /* footer / elevated panel */
  --cw-bg-elevated:   #1a1f28;  /* chip / secondary button fill */

  /* Gradient behind starfield (fixed on body) */
  --cw-bg-grad-inner: #121820;
  --cw-bg-grad-outer: #0a0e14;
  --cw-bg-radial:     radial-gradient(circle at center, var(--cw-bg-grad-inner) 0%, var(--cw-bg-grad-outer) 100%);

  /* ---------- Color: glass surfaces ---------- */
  --cw-card-bg:       rgba(32, 38, 47, 0.40);
  --cw-card-border:   rgba(68, 72, 79, 0.15);
  --cw-card-blur:     12px;
  --cw-nav-bg:        rgba(10, 14, 20, 0.80);
  --cw-footer-bg:     rgba(15, 20, 26, 0.90);

  /* ---------- Color: text ---------- */
  --cw-fg:            #f1f3fc;  /* primary */
  --cw-fg-2:          #a8abb3;  /* secondary / body muted */
  --cw-fg-3:          #686880;  /* meta, timestamps, micro-labels */
  --cw-fg-4:          #44484f;  /* borders, dividers, disabled */

  /* ---------- Color: accents ---------- */
  /* Magenta is the PRIMARY accent (buttons, CTAs, wordmark glow, focus).
     Cyan is the SUPPORTING accent (highlights, secondary buttons, chart lines). */
  --cw-magenta:       #FF51FA;  /* primary accent */
  --cw-magenta-hover: #e645e0;  /* CTA gradient stop */
  --cw-magenta-bright:#ff9cff;  /* glow halo */
  --cw-magenta-2:     #ff51fa;  /* alias, lower-case hex used in source */
  --cw-cyan:          #00F0FF;  /* supporting accent */
  --cw-cyan-hover:    #00c4cc;
  --cw-cyan-bright:   #8ff5ff;

  /* ---------- Color: alpha tints (for fills/borders) ---------- */
  --cw-cyan-10:       rgba(0, 240, 255, 0.10);
  --cw-cyan-20:       rgba(0, 240, 255, 0.20);
  --cw-cyan-30:       rgba(0, 240, 255, 0.30);
  --cw-cyan-40:       rgba(0, 240, 255, 0.40);
  --cw-magenta-10:    rgba(255, 81, 250, 0.10);
  --cw-magenta-20:    rgba(255, 81, 250, 0.20);
  --cw-magenta-30:    rgba(255, 81, 250, 0.30);
  --cw-magenta-40:    rgba(255, 81, 250, 0.40);

  /* ---------- Color: semantic ---------- */
  --cw-success:       #4ade80;  /* live/online dot */
  --cw-danger:        #ff4f6f;  /* evil mascot red */
  --cw-link:          var(--cw-magenta);
  --cw-selection-bg:  rgba(255, 81, 250, 0.30);

  /* ---------- Gradients ---------- */
  --cw-grad-headline: linear-gradient(to right, var(--cw-magenta), var(--cw-cyan));
  --cw-grad-cta:      linear-gradient(to right, var(--cw-magenta), var(--cw-magenta-hover));
  --cw-grad-divider:  linear-gradient(to right, var(--cw-magenta), transparent);
  --cw-grad-divider-c:linear-gradient(to right, var(--cw-cyan), transparent);

  /* ---------- Shadows / glows ---------- */
  --cw-glow-cyan-sm:  0 0 20px rgba(0, 240, 255, 0.20);
  --cw-glow-cyan-md:  0 0 30px rgba(0, 240, 255, 0.30);
  --cw-glow-cyan-lg:  0 0 30px rgba(143, 245, 255, 0.40);
  --cw-glow-mag-sm:   0 0 20px rgba(255, 81, 250, 0.20);
  --cw-glow-mag-md:   0 0 30px rgba(255, 81, 250, 0.30);
  --cw-glow-mag-lg:   0 0 40px rgba(255, 81, 250, 0.50);
  --cw-shadow-nav:    0 8px 32px rgba(0, 0, 0, 0.36);
  --cw-shadow-lift:   0 8px 40px rgba(0, 0, 0, 0.30);

  /* ---------- Radii ---------- */
  --cw-r-xs:          6px;   /* tech tag chips */
  --cw-r-sm:          8px;   /* inputs, buttons-rect */
  --cw-r-md:          12px;  /* service cards */
  --cw-r-lg:          16px;  /* large containers */
  --cw-r-xl:          20px;  /* portfolio tiles, icon squircles */
  --cw-r-pill:        999px; /* CTAs, status chips */

  /* ---------- Spacing scale ---------- */
  --cw-s-1:  4px;
  --cw-s-2:  8px;
  --cw-s-3:  12px;
  --cw-s-4:  16px;
  --cw-s-5:  20px;
  --cw-s-6:  24px;
  --cw-s-8:  32px;
  --cw-s-10: 40px;
  --cw-s-12: 48px;
  --cw-s-16: 64px;
  --cw-s-24: 96px;   /* section vertical padding */
  --cw-s-32: 128px;  /* CTA moment */

  /* ---------- Type: families ---------- */
  --cw-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --cw-font-body:    'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  --cw-font-icon:    'Material Symbols Outlined';

  /* ---------- Type: weights ---------- */
  --cw-w-regular:  400;
  --cw-w-medium:   500;
  --cw-w-semibold: 600;
  --cw-w-bold:     700;
  --cw-w-extra:    800;
  --cw-w-black:    900;

  /* ---------- Type: sizes ---------- */
  --cw-t-micro:    10px;
  --cw-t-xs:       12px;
  --cw-t-sm:       14px;
  --cw-t-base:     16px;
  --cw-t-md:       18px;
  --cw-t-lg:       20px;
  --cw-t-xl:       24px;
  --cw-t-2xl:      32px;
  --cw-t-3xl:      40px;
  --cw-t-4xl:      56px;
  --cw-t-5xl:      72px;
  --cw-t-hero:     96px;   /* md:text-8xl hero */

  /* ---------- Type: tracking ---------- */
  --cw-tr-tighter: -0.04em; /* headlines */
  --cw-tr-tight:   -0.02em; /* sub-headlines */
  --cw-tr-normal:  0;
  --cw-tr-wide:    0.05em;  /* nav links, footer */
  --cw-tr-wider:   0.10em;  /* meta labels */
  --cw-tr-widest:  0.15em;  /* section labels */

  /* ---------- Type: leading ---------- */
  --cw-lh-tight:   0.9;     /* huge hero */
  --cw-lh-snug:    1.15;    /* headlines */
  --cw-lh-base:    1.6;     /* body */
  --cw-lh-relaxed: 1.75;
}

/* ============================================================
   Base element styles — semantic mappings
   ============================================================ */

html, body {
  background: var(--cw-bg);
  color: var(--cw-fg);
  font-family: var(--cw-font-display);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--cw-selection-bg);
  color: #fff;
}

/* Headings — display stack */
h1, .cw-h1 {
  font-family: var(--cw-font-display);
  font-weight: var(--cw-w-black);
  font-size: clamp(3.5rem, 10vw, var(--cw-t-hero));
  line-height: var(--cw-lh-tight);
  letter-spacing: var(--cw-tr-tighter);
  color: var(--cw-fg);
}
h2, .cw-h2 {
  font-family: var(--cw-font-display);
  font-weight: var(--cw-w-black);
  font-size: clamp(2rem, 5vw, var(--cw-t-4xl));
  line-height: var(--cw-lh-snug);
  letter-spacing: var(--cw-tr-tighter);
  color: var(--cw-fg);
}
h3, .cw-h3 {
  font-family: var(--cw-font-display);
  font-weight: var(--cw-w-bold);
  font-size: var(--cw-t-xl);
  line-height: var(--cw-lh-snug);
  letter-spacing: var(--cw-tr-tight);
  color: var(--cw-fg);
}
h4, .cw-h4 {
  font-family: var(--cw-font-display);
  font-weight: var(--cw-w-bold);
  font-size: var(--cw-t-lg);
  line-height: var(--cw-lh-snug);
  color: var(--cw-fg);
}

/* Body */
p, .cw-body {
  font-family: var(--cw-font-body);
  font-weight: var(--cw-w-regular);
  font-size: var(--cw-t-base);
  line-height: var(--cw-lh-base);
  color: var(--cw-fg-2);
}

/* Micro-labels (e.g. AVAILABLE FOR PROJECTS, LIVE MARKET DATA) */
.cw-label {
  font-family: var(--cw-font-display);
  font-weight: var(--cw-w-bold);
  font-size: var(--cw-t-xs);
  letter-spacing: var(--cw-tr-widest);
  text-transform: uppercase;
  color: var(--cw-fg-3);
}

/* Nav / meta links */
.cw-meta {
  font-family: var(--cw-font-display);
  font-weight: var(--cw-w-medium);
  font-size: var(--cw-t-sm);
  letter-spacing: var(--cw-tr-wide);
  color: var(--cw-fg-2);
}

/* Tech tag chip text */
.cw-mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--cw-t-micro);
  letter-spacing: 0.05em;
  color: var(--cw-fg-3);
}

/* Gradient headline span */
.cw-grad-text {
  background: var(--cw-grad-headline);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Glass surface mixin */
.cw-glass {
  background: var(--cw-card-bg);
  backdrop-filter: blur(var(--cw-card-blur));
  -webkit-backdrop-filter: blur(var(--cw-card-blur));
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-r-md);
}

/* CTA buttons */
.cw-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-s-2);
  padding: 14px 28px;
  border-radius: var(--cw-r-pill);
  font-family: var(--cw-font-display);
  font-weight: var(--cw-w-bold);
  font-size: var(--cw-t-md);
  border: 0;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 300ms ease, background 200ms ease;
  text-decoration: none;
}
.cw-btn-primary {
  background: var(--cw-magenta);
  color: #fff;
}
.cw-btn-primary:hover {
  box-shadow: var(--cw-glow-mag-lg);
  transform: translateY(-1px);
}
.cw-btn-primary:active { transform: scale(0.95); }

.cw-btn-secondary {
  background: var(--cw-cyan);
  color: var(--cw-bg);
}
.cw-btn-secondary:hover {
  box-shadow: var(--cw-glow-cyan-lg);
  transform: translateY(-1px);
}

.cw-btn-outline {
  background: transparent;
  color: var(--cw-fg);
  border: 1px solid var(--cw-fg-4);
  backdrop-filter: blur(12px);
}
.cw-btn-outline:hover {
  border-color: var(--cw-magenta);
  box-shadow: var(--cw-glow-mag-md);
  transform: translateY(-1px);
}

/* Icon font helper */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}