/* ──────────────────────────────────────────────────────────────────
   Clikup Design System — Color & Type Tokens
   ────────────────────────────────────────────────────────────────── */

/* Geist via Google Fonts (Variable). Closest match to the Figma source. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:wght@400..900&family=Plus+Jakarta+Sans:wght@400..700&display=swap');

:root {
  /* ── Brand ──────────────────────────────────────── */
  --brand-orange:        rgb(254, 118, 62);   /* Clikup signature */
  --brand-orange-soft:   rgba(254, 118, 62, 0.12);
  --brand-orange-press:  rgb(228, 96, 42);

  /* ── Foreground / Text ──────────────────────────── */
  --fg-1:                rgb(25, 22, 21);     /* primary / headlines (warm black) */
  --fg-2:                rgb(40, 40, 40);     /* default body / strong */
  --fg-3:                rgb(102, 102, 102);  /* secondary text */
  --fg-4:                rgb(128, 128, 128);  /* muted / captions */
  --fg-5:                rgb(140, 140, 154);  /* faintest copy */
  --fg-display:          rgb(19, 19, 19);     /* heroes / display headlines */
  --fg-on-orange:        rgb(255, 255, 255);
  --fg-on-dark:          rgb(255, 255, 255);

  /* ── Background / Surface ───────────────────────── */
  --bg-canvas:           rgb(255, 255, 255);  /* page */
  --bg-surface:          rgb(255, 255, 255);  /* card */
  --bg-subtle:           rgb(248, 248, 248);  /* section bands, subtle wells */
  --bg-muted:            rgb(250, 250, 250);
  --bg-input:            rgb(255, 255, 255);
  --bg-deep:             rgb(25, 22, 21);     /* dark CTA, dark sections */
  --bg-deep-2:           rgb(60, 43, 31);     /* warm coffee — secondary dark */

  /* ── Border / Stroke ────────────────────────────── */
  --border-1:            rgb(221, 224, 229);  /* default */
  --border-2:            rgb(235, 235, 235);  /* lighter divider */
  --border-3:            rgb(224, 228, 232);  /* input outline */
  --border-hairline:     rgba(19, 19, 19, 0.12);

  /* ── Accent / Semantic (used sparingly in dashboards) ── */
  --accent-green:        rgb(8, 170, 119);
  --accent-blue:         rgb(56, 124, 255);
  --accent-blue-link:    rgb(0, 115, 255);
  --accent-purple:       rgb(127, 87, 241);
  --accent-violet:       rgb(116, 118, 237);
  --accent-indigo:       rgb(58, 59, 123);
  --accent-indigo-deep:  rgb(47, 35, 79);
  --accent-cyan:         rgb(100, 194, 219);

  /* ── Shadow / Elevation (Clikup signature soft halo) ── */
  --shadow-ring:         0 0 0 1px rgba(18, 55, 105, 0.08);          /* hairline ring */
  --shadow-pop:          0 2px 3px 0 rgba(42, 59, 81, 0.15);          /* tiny lift */
  --shadow-card:         0 0 0 1px rgba(18, 55, 105, 0.08),
                         0 2px 3px 0 rgba(42, 59, 81, 0.15);
  --shadow-input-inset:  inset 0 -2.9px 5.8px 0 rgba(255,255,255,0.08),
                         inset 0  2.9px 5.8px 0 rgba(255,255,255,0.08);

  /* ── Gradients ──────────────────────────────────── */
  --grad-primary:        linear-gradient(rgb(102,102,102) 0%, rgb(25,22,21) 100%);
  --grad-secondary:      linear-gradient(rgb(255,255,255) 0%, rgb(246,246,246) 100%);
  --grad-fade-down:      linear-gradient(rgb(25,22,21) 0%, rgba(25,22,21,0) 100%);

  /* ── Radius scale ───────────────────────────────── */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 9999px;
  --radius-input: 64px;   /* signature pill input */

  /* ── Spacing ────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  60px;
  --space-10: 80px;
  --space-11: 108px; /* page gutter */

  /* ── Typography ─────────────────────────────────── */
  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-aux:     "Plus Jakarta Sans", "Geist", sans-serif;
  --font-banner:  "Inter", "Geist", sans-serif; /* style-guide section banners */

  --tracking-tight:    -0.045em;  /* display / hero */
  --tracking-tighter:  -0.030em;  /* h5 / large UI */
  --tracking-normal:   -0.008em;  /* body lg */
  --tracking-input:    -0.035em;  /* input labels */
}

/* ── Semantic typography (the "scale") ────────────── */

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 72px;
  line-height: 80px;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-2);
}

.h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-2);
}

.h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-2);
}

.h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 40px;
  line-height: 52px;
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-2);
}

.h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-1);
}

.h5 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-1);
}

.body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--fg-2);
}

.body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--fg-2);
}

.body-muted {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--fg-4);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-2);
}

.body-xs {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-4);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--fg-2);
}