/* ============================================================
   Urbe Hub — Design Tokens
   Colors, typography, spacing, radii, shadows, motion.
   Import Poppins from Google Fonts before this stylesheet.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --uh-pink:        #CC2B5E;   /* gradient start, accent, links */
  --uh-purple:      #753A88;   /* gradient end */
  --uh-cream:       #F8F6EE;   /* primary background (light surfaces) */
  --uh-black:       #000000;   /* headings, footer */
  --uh-body:        #454545;   /* body text */
  --uh-muted:       #9BA1A5;   /* captions, secondary */
  --uh-white:       #FFFFFF;   /* text on dark/gradient */

  /* dark surface used in decks + member dashboard */
  --uh-dark-bg:     #0C0C1A;
  --uh-dark-surface:#14142B;
  --uh-dark-border: rgba(255,255,255,0.08);

  /* supporting neutrals derived from cream */
  --uh-cream-2:     #EFECDE;   /* card on cream */
  --uh-cream-3:     #E3DFCE;   /* border on cream */
  --uh-ink-2:       #1A1A2E;   /* near-black for dark text on cream */

  /* ---------- SEMANTIC ---------- */
  --uh-fg-1:        var(--uh-black);     /* primary text */
  --uh-fg-2:        var(--uh-body);      /* secondary text */
  --uh-fg-3:        var(--uh-muted);     /* captions / eyebrow */
  --uh-fg-invert:   var(--uh-white);     /* text on dark/gradient */
  --uh-link:        var(--uh-pink);
  --uh-accent:      var(--uh-pink);
  --uh-bg:          var(--uh-cream);
  --uh-bg-alt:      var(--uh-white);
  --uh-bg-dark:     var(--uh-dark-bg);
  --uh-border:      rgba(0,0,0,0.08);
  --uh-border-strong: rgba(0,0,0,0.16);

  /* ---------- GRADIENTS ---------- */
  /* Canonical radial gradient used on website hero */
  --uh-grad-radial: radial-gradient(112% 150% at 0% 100%, #CC2B5E 0%, #753A88 100%);
  /* Linear variant used on decks / print */
  --uh-grad-linear: linear-gradient(135deg, #CC2B5E 0%, #753A88 100%);
  /* Text-fill gradient (slightly more purple in the middle for readability) */
  --uh-grad-text:   linear-gradient(135deg, #CC2B5E 0%, #A03273 50%, #753A88 100%);

  /* ---------- TYPOGRAPHY ---------- */
  --uh-font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --uh-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --uh-weight-light:    300;
  --uh-weight-regular:  400;
  --uh-weight-medium:   500;
  --uh-weight-semibold: 600;
  --uh-weight-bold:     700;
  --uh-weight-xbold:    800;
  --uh-weight-black:    900;

  /* Sizes — digital. Multiply by 0.75 for pt (print). */
  --uh-size-display: 64px;   /* 48-72px */
  --uh-size-h1:     40px;    /* 36-48 */
  --uh-size-h2:     32px;    /* 28-36 */
  --uh-size-h3:     22px;
  --uh-size-body:   17px;    /* 16-18 */
  --uh-size-small:  14px;    /* 14-16 */
  --uh-size-caption:13px;
  --uh-size-eyebrow:11px;
  --uh-size-tagline:28px;    /* 24-30 light italic */

  --uh-lh-tight:   1.05;
  --uh-lh-heading: 1.15;
  --uh-lh-body:    1.65;

  --uh-track-display: -0.02em;
  --uh-track-heading: -0.01em;
  --uh-track-eyebrow:  0.15em;   /* uppercase eyebrows */
  --uh-track-tag:      0.25em;   /* tagline */

  /* ---------- SPACING ---------- */
  --uh-space-0:  0;
  --uh-space-1:  4px;
  --uh-space-2:  8px;
  --uh-space-3:  12px;
  --uh-space-4:  16px;
  --uh-space-5:  24px;
  --uh-space-6:  32px;
  --uh-space-7:  48px;
  --uh-space-8:  64px;
  --uh-space-9:  96px;
  --uh-space-10: 128px;

  /* ---------- RADII ---------- */
  --uh-radius-xs:  4px;
  --uh-radius-sm:  8px;
  --uh-radius-md:  12px;
  --uh-radius-lg:  18px;
  --uh-radius-xl:  26px;    /* card radius used on marketing site */
  --uh-radius-2xl: 32px;
  --uh-radius-pill: 999px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --uh-shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --uh-shadow-2: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --uh-shadow-3: 0 12px 32px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.05);
  --uh-shadow-glow: 0 0 0 1px rgba(204,43,94,0.15), 0 8px 24px rgba(204,43,94,0.20);
  --uh-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---------- MOTION ---------- */
  --uh-ease-std:  cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint — default */
  --uh-ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --uh-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --uh-dur-fast:   150ms;
  --uh-dur-std:    240ms;
  --uh-dur-slow:   420ms;
  --uh-dur-drift: 18000ms;   /* orb drift animations on decks */

  /* ---------- Z-INDEX ---------- */
  --uh-z-nav: 100;
  --uh-z-modal: 1000;
  --uh-z-overlay: 2000;
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--uh-font-sans);
  font-size: var(--uh-size-body);
  font-weight: var(--uh-weight-regular);
  line-height: var(--uh-lh-body);
  color: var(--uh-fg-2);
  background: var(--uh-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--uh-font-sans);
  color: var(--uh-fg-1);
  line-height: var(--uh-lh-heading);
  margin: 0 0 var(--uh-space-4);
  letter-spacing: var(--uh-track-heading);
}
h1 { font-size: var(--uh-size-h1); font-weight: var(--uh-weight-bold); letter-spacing: var(--uh-track-display); }
h2 { font-size: var(--uh-size-h2); font-weight: var(--uh-weight-semibold); }
h3 { font-size: var(--uh-size-h3); font-weight: var(--uh-weight-semibold); }

p { margin: 0 0 var(--uh-space-4); }

a { color: var(--uh-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

code, kbd, samp, pre {
  font-family: var(--uh-font-mono);
  font-size: 0.92em;
  background: rgba(204,43,94,0.08);
  color: var(--uh-fg-1);
  padding: 2px 6px;
  border-radius: var(--uh-radius-xs);
}
pre { padding: var(--uh-space-4); overflow:auto; line-height: 1.55; }

hr { border: 0; border-top: 1px solid var(--uh-border); margin: var(--uh-space-7) 0; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Type */
.uh-display   { font-size: var(--uh-size-display); font-weight: var(--uh-weight-bold); letter-spacing: var(--uh-track-display); line-height: var(--uh-lh-tight); }
.uh-h1        { font-size: var(--uh-size-h1); font-weight: var(--uh-weight-bold); line-height: var(--uh-lh-heading); }
.uh-h2        { font-size: var(--uh-size-h2); font-weight: var(--uh-weight-semibold); line-height: var(--uh-lh-heading); }
.uh-h3        { font-size: var(--uh-size-h3); font-weight: var(--uh-weight-semibold); }
.uh-body      { font-size: var(--uh-size-body); font-weight: var(--uh-weight-regular); line-height: var(--uh-lh-body); }
.uh-small     { font-size: var(--uh-size-small); }
.uh-caption   { font-size: var(--uh-size-caption); font-weight: var(--uh-weight-light); color: var(--uh-fg-3); }
.uh-eyebrow   { font-size: var(--uh-size-eyebrow); font-weight: var(--uh-weight-bold); letter-spacing: var(--uh-track-eyebrow); text-transform: uppercase; color: var(--uh-fg-3); }
.uh-tagline   { font-size: var(--uh-size-tagline); font-weight: var(--uh-weight-light); font-style: italic; letter-spacing: 0.04em; color: var(--uh-fg-2); }

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

/* Surfaces */
.uh-surface-cream { background: var(--uh-cream); color: var(--uh-fg-2); }
.uh-surface-white { background: var(--uh-white); color: var(--uh-fg-2); }
.uh-surface-dark  { background: var(--uh-dark-bg); color: var(--uh-fg-invert); }
.uh-surface-grad  { background: var(--uh-grad-radial); color: var(--uh-fg-invert); }

/* Card */
.uh-card {
  background: var(--uh-white);
  border: 1px solid var(--uh-border);
  border-radius: var(--uh-radius-xl);
  padding: var(--uh-space-6);
  box-shadow: var(--uh-shadow-2);
}
.uh-card-dark {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--uh-dark-border);
  border-radius: var(--uh-radius-xl);
  padding: var(--uh-space-6);
  color: var(--uh-fg-invert);
}

/* Buttons */
.uh-btn {
  display: inline-flex; align-items:center; justify-content:center; gap: 8px;
  font-family: inherit;
  font-size: var(--uh-size-small);
  font-weight: var(--uh-weight-semibold);
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: var(--uh-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--uh-dur-fast) var(--uh-ease-std),
              background var(--uh-dur-std) var(--uh-ease-std),
              box-shadow var(--uh-dur-std) var(--uh-ease-std),
              color var(--uh-dur-std) var(--uh-ease-std);
  text-decoration: none;
  white-space: nowrap;
}
.uh-btn:active { transform: translateY(1px) scale(0.99); }

.uh-btn-primary {
  background: var(--uh-grad-linear);
  color: #fff;
  box-shadow: 0 6px 20px rgba(204,43,94,0.25);
}
.uh-btn-primary:hover { box-shadow: 0 10px 30px rgba(204,43,94,0.35); text-decoration: none; }

.uh-btn-secondary {
  background: var(--uh-black);
  color: #fff;
}
.uh-btn-secondary:hover { background: #1d1d2b; text-decoration: none; }

.uh-btn-ghost {
  background: transparent;
  color: var(--uh-fg-1);
  border-color: var(--uh-border-strong);
}
.uh-btn-ghost:hover { background: rgba(0,0,0,0.04); text-decoration: none; }

.uh-btn-ghost-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.20);
}
.uh-btn-ghost-dark:hover { background: rgba(255,255,255,0.06); text-decoration: none; }

/* Input */
.uh-input {
  font: inherit;
  width: 100%;
  background: #fff;
  color: var(--uh-fg-1);
  border: 1px solid var(--uh-border-strong);
  border-radius: var(--uh-radius-md);
  padding: 12px 14px;
  transition: border-color var(--uh-dur-std) var(--uh-ease-std), box-shadow var(--uh-dur-std) var(--uh-ease-std);
}
.uh-input:focus {
  outline: none;
  border-color: var(--uh-pink);
  box-shadow: 0 0 0 4px rgba(204,43,94,0.12);
}

/* Badge / tag */
.uh-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  padding: 4px 10px; border-radius: var(--uh-radius-pill);
  background: rgba(204,43,94,0.10); color: var(--uh-pink);
  text-transform: uppercase;
}
.uh-badge-solid { background: var(--uh-pink); color:#fff; }
.uh-badge-ghost { background: transparent; color: var(--uh-fg-3); border: 1px solid var(--uh-border-strong); }

/* Divider / accent line */
.uh-accent-line {
  width: 48px; height: 3px; border-radius: 2px;
  background: var(--uh-grad-linear);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}