/* ──────────────────────────────────────────────────────────────
   Capability 360 — Foundations
   Type, color, spacing, radii, shadows.
   Source of truth for all surfaces (web, decks, prototypes).
   ────────────────────────────────────────────────────────────── */

/* Web fonts:
   - Varela Round (display) — local file (uploaded brand asset).
   - Raleway (body) — local copy of Google Fonts assets.
   Note: Varela Round only ships as a single Regular weight. */
@font-face {
  font-family: 'Varela Round';
  src: url('fonts/VarelaRound-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-600.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand palette ─────────────────────────────────────────── */
  /* Hero ink — used for ~85% of all marks: type, strokes, icons. */
  --c360-ink:           rgb(14, 23, 126);   /* #0E177E  navy */
  --c360-ink-soft:      rgb(36, 36, 134);   /* #242486  very slightly lighter */
  --c360-ink-deep:      rgb(8, 14, 80);     /* darker navy for hover */

  /* Logo gradient — the only place real color happens. */
  --c360-grad-start:    rgb(52, 44, 181);   /* #342CB5 indigo */
  --c360-grad-end:      rgb(67, 181, 242);  /* #43B5F2 sky */
  --c360-gradient:      linear-gradient(180deg, var(--c360-grad-start) 0%, var(--c360-grad-end) 100%);
  --c360-gradient-diag: linear-gradient(135deg, var(--c360-grad-start) 0%, var(--c360-grad-end) 100%);

  /* Surfaces */
  --c360-bg:            rgb(255, 255, 255); /* paper */
  --c360-bg-tint:       rgb(252, 252, 254); /* a hair off-white */
  --c360-line:          rgba(14, 23, 126, 0.05);   /* hairline border */
  --c360-line-strong:   rgba(14, 23, 126, 0.18);   /* divider */
  --c360-line-ink:      rgb(14, 23, 126);   /* full-strength outline (pills) */

  /* Text */
  --c360-fg:            rgb(0, 0, 0);       /* primary body text */
  --c360-fg-2:          rgba(0, 0, 0, 0.7); /* secondary */
  --c360-fg-3:          rgba(0, 0, 0, 0.5); /* tertiary, captions */
  --c360-on-ink:        rgb(255, 255, 255); /* text on navy */

  /* Shadow — used very sparingly. Only the logo orb has one. */
  --c360-shadow-sm:     0 4px 12px 0 rgba(14, 23, 126, 0.04);
  --c360-shadow-md:     0 10px 22px 0 rgba(0, 0, 0, 0.05);
  --c360-shadow-lg:     0 24px 48px 0 rgba(14, 23, 126, 0.08);

  /* Radii — pills are huge, cards are gentle */
  --c360-radius-xs:     4px;
  --c360-radius-sm:     6px;   /* mobile cards */
  --c360-radius-md:     12px;
  --c360-radius-lg:     20px;  /* hero panel */
  --c360-radius-pill:   99px;  /* category chips */

  /* Spacing scale (4px base) */
  --c360-space-1:       4px;
  --c360-space-2:       8px;
  --c360-space-3:       12px;
  --c360-space-4:       16px;
  --c360-space-5:       20px;
  --c360-space-6:       24px;
  --c360-space-8:       32px;
  --c360-space-10:      40px;
  --c360-space-12:      48px;
  --c360-space-16:      64px;
  --c360-space-20:      80px;
  --c360-space-30:      120px; /* hero top-padding */

  /* ── Type primitives ──────────────────────────────────────── */
  --c360-font-display:  'Varela Round', system-ui, sans-serif;
  --c360-font-body:     'Raleway', system-ui, -apple-system, sans-serif;

  /* Display sizes (Varela Round) */
  --c360-size-display:  60px;  /* hero — desktop */
  --c360-size-h1:       40px;  /* tablet hero */
  --c360-size-h2:       30px;  /* mobile hero / section title */

  /* Body sizes (Raleway) */
  --c360-size-lead:     22px;  /* hero subtitle, desktop */
  --c360-size-body:     16px;  /* default */
  --c360-size-small:    14px;
  --c360-size-caption:  12px;  /* mobile body, chip labels mobile */

  /* Weights */
  --c360-weight-regular: 400;
  --c360-weight-medium:  500;
  --c360-weight-semi:    600;
  --c360-weight-bold:    700;

  /* Line-height — Figma uses tight 100% throughout. We loosen for prose. */
  --c360-leading-tight:  1.0;
  --c360-leading-snug:   1.2;
  --c360-leading-normal: 1.5;
  --c360-leading-relaxed: 1.65;

  /* Tracking */
  --c360-tracking-tight:  -0.01em;
  --c360-tracking-normal: 0;
  --c360-tracking-wide:   0.02em;
}

/* ── Semantic type classes (use these, not raw vars) ─────────── */

.c360-display,
h1.c360 {
  font-family: var(--c360-font-display);
  font-size: var(--c360-size-display);
  line-height: var(--c360-leading-tight);
  color: var(--c360-ink);
  letter-spacing: var(--c360-tracking-tight);
  font-weight: 400; /* Varela Round only ships at 400 */
  margin: 0;
}

.c360-h1 {
  font-family: var(--c360-font-display);
  font-size: var(--c360-size-h1);
  line-height: var(--c360-leading-tight);
  color: var(--c360-ink);
  font-weight: 400;
  margin: 0;
}

.c360-h2 {
  font-family: var(--c360-font-display);
  font-size: var(--c360-size-h2);
  line-height: var(--c360-leading-snug);
  color: var(--c360-ink);
  font-weight: 400;
  margin: 0;
}

.c360-eyebrow {
  font-family: var(--c360-font-body);
  font-size: var(--c360-size-caption);
  font-weight: var(--c360-weight-medium);
  color: var(--c360-ink);
  letter-spacing: var(--c360-tracking-wide);
  text-transform: uppercase;
  margin: 0;
}

.c360-lead,
p.c360-lead {
  font-family: var(--c360-font-body);
  font-size: var(--c360-size-lead);
  line-height: var(--c360-leading-snug);
  color: var(--c360-fg);
  font-weight: var(--c360-weight-regular);
  margin: 0;
}

.c360-body,
p.c360 {
  font-family: var(--c360-font-body);
  font-size: var(--c360-size-body);
  line-height: var(--c360-leading-relaxed);
  color: var(--c360-fg);
  font-weight: var(--c360-weight-regular);
  margin: 0;
}

.c360-small {
  font-family: var(--c360-font-body);
  font-size: var(--c360-size-small);
  line-height: var(--c360-leading-normal);
  color: var(--c360-fg-2);
  font-weight: var(--c360-weight-regular);
}

.c360-caption {
  font-family: var(--c360-font-body);
  font-size: var(--c360-size-caption);
  line-height: var(--c360-leading-normal);
  color: var(--c360-fg-3);
  font-weight: var(--c360-weight-regular);
}

.c360-label {
  /* Used inside category pills, nav links, button labels */
  font-family: var(--c360-font-body);
  font-size: var(--c360-size-body);
  font-weight: var(--c360-weight-medium);
  line-height: var(--c360-leading-tight);
  color: var(--c360-ink);
}

@media (max-width: 560px) {
  :root {
    --c360-size-lead:   18px;
    --c360-size-body:   14px;
    --c360-size-small:  13px;
    --c360-size-caption: 11px;
  }
}

/* ── Backgrounds ─────────────────────────────────────────────── */
/* The signature watercolour wash that sits behind hero panels. */
.c360-watercolour {
  background-image: url('assets/background-watermark.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--c360-bg);
}