/* =============================================================
   Raidiam Design System — Colors & Type
   Source: raidiam.com (marketing site) + Raidiam Connect product
   screenshots. Where exact tokens were not published, values are
   carefully sampled from logos, screens, and case-study assets.
   ============================================================= */

/* ---------------------------------------------------------------
   FONT FACES
   Raidiam's canonical typeface is SATOSHI (variable). Supplied by
   the brand team and shipped locally in /fonts. Body and display
   both render in Satoshi — weight does the heavy lifting.
   JetBrains Mono (Google Fonts) is used for IDs / certs / code.
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('fonts/Satoshi-Variable.woff2') format('woff2');
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --brand-mint: #34C8B6;          /* the icon "C" mark; primary accent */
  --brand-mint-bright: #4FE0CD;   /* hover / highlight */
  --brand-mint-deep: #1FA999;     /* pressed / dark surface accent */
  --brand-mint-soft: #C9F0EA;     /* tinted backgrounds, chips */

  --brand-ink: #0F2A2E;           /* deepest forest-ink, hero backgrounds */
  --brand-ink-2: #14383C;         /* navigation / sidebar */
  --brand-ink-3: #1B484C;         /* raised surfaces on dark */
  --brand-ink-line: #25575C;      /* dividers on dark */

  /* ---------- NEUTRALS (light surface) ---------- */
  --neutral-0:  #FFFFFF;
  --neutral-50: #F7F9F9;
  --neutral-100:#EEF2F2;
  --neutral-200:#DDE5E5;
  --neutral-300:#C2CECE;
  --neutral-400:#94A3A3;
  --neutral-500:#637272;
  --neutral-600:#3F4D4D;
  --neutral-700:#27302F;
  --neutral-800:#161D1C;
  --neutral-900:#0A0E0E;

  /* ---------- SEMANTIC ---------- */
  --success: #2BB673;
  --success-soft: #D9F2E5;
  --warning: #E8A53A;
  --warning-soft: #FBEBCC;
  --danger:  #DC4040;
  --danger-soft: #F8DADA;
  --info:    #2F8FCC;
  --info-soft: #D6EAF7;

  /* ---------- FG / BG (light theme defaults) ---------- */
  --bg-canvas: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-raised: var(--neutral-0);
  --bg-muted: var(--neutral-100);

  --fg1: var(--neutral-900);   /* primary text */
  --fg2: var(--neutral-600);   /* secondary text */
  --fg3: var(--neutral-500);   /* tertiary, captions */
  --fg-mute: var(--neutral-400);
  --fg-on-ink: #E9F3F2;        /* primary text on dark surfaces */
  --fg-on-ink-2: #A8C0BF;      /* secondary text on dark surfaces */
  --fg-link: var(--brand-mint-deep);

  /* ---------- BORDERS ---------- */
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus: var(--brand-mint);
  --border-on-ink: var(--brand-ink-line);

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(15,42,46,0.06);
  --shadow-sm: 0 2px 6px rgba(15,42,46,0.08);
  --shadow-md: 0 8px 22px rgba(15,42,46,0.10);
  --shadow-lg: 0 22px 60px rgba(15,42,46,0.16);
  --shadow-glow: 0 0 0 4px rgba(52,200,182,0.22);

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display-xl: clamp(48px, 6vw, 76px);  /* hero headlines */
  --fs-display-lg: clamp(36px, 4.5vw, 56px);
  --fs-display-md: 40px;                    /* big section heads */
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 20px;
  --fs-h4: 17px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-mono: 13px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* =============== SEMANTIC CLASSES =============== */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--fg1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--lh-snug);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}
.caption {
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 600;
}
code, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

a, .link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-standard);
}
a:hover, .link:hover {
  border-bottom-color: var(--fg-link);
}