/* Ringtime Design System — colors_and_type.css
   Tokens extracted from /2026-styling Figma frames.
   Use --rt-* variables; semantic helpers below. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/geist/v3/gyByhwUxId8gMEwSGFWNOITddY4.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/poppins/v22/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2") format("woff2");
}
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/sourcecodepro/v22/HI_diYsKILxRpg3hIP6sJ7fM7PqlOOvWlA.woff2") format("woff2");
}

:root {
  /* ── Voice — PRIMARY (brand blue) ──────── */
  --rt-voice-50:           #E8F0FF;
  --rt-voice-200:          #DDE9FF;
  --rt-voice-500:          #C9DCFD;
  --rt-voice-700:          #B4CFFF;
  --rt-voice-900:          #77A8FF;     /* deepest primary */

  /* legacy "engine-*" aliases now mapped to Voice for back-compat */
  --rt-engine-bg:          var(--rt-voice-50);
  --rt-engine-border:      var(--rt-voice-200);
  --rt-engine-border-2:    var(--rt-voice-700);
  --rt-engine-accent:      var(--rt-voice-900);
  --rt-engine-accent-2:    var(--rt-voice-700);
  --rt-terminal-blue:      var(--rt-voice-900);

  /* ── Glow — secondary warm ─────────────── */
  --rt-glow-50:            #FFF6EB;
  --rt-glow-200:           #FCDDB5;
  --rt-glow-500:           #FFC57A;
  --rt-glow-900:           #CC9E62;

  /* legacy "cream-*" aliases mapped to Glow */
  --rt-cream-50:           var(--rt-glow-50);
  --rt-cream-100:          var(--rt-glow-50);
  --rt-cream-200:          var(--rt-glow-200);
  --rt-cream-300:          var(--rt-glow-500);
  --rt-brand-gold:         var(--rt-glow-900);

  /* ── Compassion — secondary coral ──────── */
  --rt-compassion-50:      #FDEAE8;
  --rt-compassion-200:     #F7ABA1;
  --rt-compassion-500:     #F27464;
  --rt-compassion-900:     #C25D50;

  /* legacy coral aliases */
  --rt-brand-coral:        var(--rt-compassion-500);
  --rt-brand-coral-2:      var(--rt-compassion-500);

  /* ── Brand neutrals (logo / text) ──────── */
  --rt-brand-slate:        rgb(25, 31, 31);    /* logo, primary text */
  --rt-brand-slate-soft:   rgb(31, 41, 55);    /* badge text, ui labels */

  /* ── Neutrals ─────────────────────────── */
  --rt-grey-50:            rgb(248, 249, 250);
  --rt-grey-100:           rgb(228, 230, 234);  /* badge fill */
  --rt-grey-200:           rgb(217, 217, 217);
  --rt-grey-300:           rgb(208, 212, 218);  /* node border */
  --rt-grey-400:           rgb(191, 191, 191);
  --rt-grey-500:           rgb(155, 162, 174);  /* most-used grey */
  --rt-grey-600:           rgb(107, 114, 128);  /* subtitle text */
  --rt-grey-700:           rgb(75, 85, 99);
  --rt-grey-800:           rgb(31, 41, 55);
  --rt-grey-900:           rgb(17, 24, 39);

  /* ── Terminal ─────────────────────────── */
  --rt-term-bg:            rgb(19, 25, 32);
  --rt-term-body:          rgb(24, 30, 37);
  --rt-term-title:         rgb(163, 165, 168);
  --rt-term-text:          rgb(250, 243, 224);
  --rt-term-prompt:        var(--rt-voice-900);  /* `~` prompt = Voice 900 */
  --rt-term-caret:         rgb(132, 204, 22);    /* green > caret */

  /* ── LED dots ─────────────────────────── */
  --rt-led-red:            var(--rt-compassion-500);
  --rt-led-blue:           var(--rt-voice-900);
  --rt-led-off:            rgb(208, 212, 218);

  /* ── Surfaces & lines ─────────────────── */
  --rt-bg:                 #ffffff;
  --rt-bg-canvas-dot:      rgb(217, 217, 217);
  --rt-fg:                 var(--rt-brand-slate);
  --rt-fg-muted:           var(--rt-grey-600);
  --rt-border:             var(--rt-grey-300);

  /* ── Type families ────────────────────── */
  --rt-font-display:       "Geist", "Times New Roman", serif; /* per Figma usage */
  --rt-font-sans:          "Geist", "Helvetica Neue", Arial, sans-serif;
  --rt-font-ui:            "Poppins", "Helvetica Neue", Arial, sans-serif;
  --rt-font-mono:          "Source Code Pro", "SF Mono", Menlo, Consolas, monospace;

  /* ── Type scale (px, lock to canvas) ──── */
  --rt-fs-display-xl:      96px;   /* big hero numerals */
  --rt-fs-display-l:       64px;
  --rt-fs-display-m:       48px;
  --rt-fs-h1:              40px;
  --rt-fs-h2:              36px;
  --rt-fs-h3:              32px;
  --rt-fs-h4:              28px;
  --rt-fs-body-l:          27.7px; /* the recurring 33.2px line, 27.7 size */
  --rt-fs-body:            24px;
  --rt-fs-label:           20px;
  --rt-fs-small:           16px;

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

  /* ── Radii ────────────────────────────── */
  --rt-radius-chip:        8px;
  --rt-radius-badge:       9px;
  --rt-radius-pill:        13.5px;
  --rt-radius-card:        20px;
  --rt-radius-card-l:      25px;
  --rt-radius-card-xl:     30px;
  --rt-radius-node:        36px;
  --rt-radius-engine:      50px;     /* engine canvas card */
  --rt-radius-circle:      9999px;

  /* ── Borders ──────────────────────────── */
  --rt-stroke-1:           1px;
  --rt-stroke-2:           2px;      /* node border */
  --rt-stroke-4:           4px;      /* engine border */

  /* ── Shadows ──────────────────────────── */
  --rt-shadow-node:        0 3px 3px 0 rgba(0,0,0,0.15);
  --rt-shadow-card:        0 4px 4px 0 rgba(0,0,0,0.15);
  --rt-shadow-floating:    0 0 10px 0 rgba(190,190,190,0.2);
  --rt-shadow-deep:        0 6px 12px 0 rgba(0,0,0,0.18); /* hover-lift */

  /* ── Motion ───────────────────────────── */
  --rt-ease-ui:            cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --rt-ease-canvas:        cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --rt-dur-fast:           120ms; /* @kind other */
  --rt-dur:                180ms; /* @kind other */
  --rt-dur-slow:           320ms; /* @kind other */
}

/* ── Semantic helpers ─────────────────────
   Use these for "headings" without re-typing tokens. */

.rt-h1 {
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: var(--rt-fs-h1);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--rt-fg);
}
.rt-h2 {
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: var(--rt-fs-h2);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--rt-fg);
}
.rt-h3 {
  font-family: var(--rt-font-display);
  font-weight: 600;
  font-size: var(--rt-fs-h3);
  line-height: 1.15;
  color: var(--rt-fg);
}
.rt-h4 {
  font-family: var(--rt-font-display);
  font-weight: 600;
  font-size: var(--rt-fs-h4);
  line-height: 1.2;
  color: var(--rt-fg);
}
.rt-display {
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: var(--rt-fs-display-l);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rt-fg);
}
.rt-headline-quote {
  font-family: var(--rt-font-display);
  font-weight: 400;
  font-size: var(--rt-fs-display-l);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--rt-fg);
}
.rt-body {
  font-family: var(--rt-font-sans);
  font-weight: 500;
  font-size: var(--rt-fs-body-l);
  line-height: 1.25;
  color: var(--rt-fg);
}
.rt-body-muted {
  font-family: var(--rt-font-sans);
  font-weight: 500;
  font-size: var(--rt-fs-body-l);
  line-height: 1.25;
  color: var(--rt-fg-muted);
}
.rt-label {
  font-family: var(--rt-font-ui);
  font-weight: 500;
  font-size: var(--rt-fs-label);
  line-height: 1.5;
  color: var(--rt-grey-600);
}
.rt-rail-label {
  font-family: var(--rt-font-ui);
  font-weight: 500;
  font-size: var(--rt-fs-h3);
  line-height: 1.25;
  color: var(--rt-brand-slate-soft);
  text-transform: uppercase;
}
.rt-mono {
  font-family: var(--rt-font-mono);
  font-weight: 700;
  font-size: var(--rt-fs-h2);
  line-height: 1;
}

/* ── Reusable surfaces ────────────────────── */

.rt-node {
  background: var(--rt-bg);
  border: var(--rt-stroke-2) solid var(--rt-grey-300);
  border-radius: var(--rt-radius-node);
  box-shadow: var(--rt-shadow-node);
}
.rt-card {
  background: var(--rt-bg);
  border: var(--rt-stroke-1) solid var(--rt-grey-300);
  border-radius: var(--rt-radius-card);
  box-shadow: var(--rt-shadow-card);
}
.rt-engine-card {
  background: var(--rt-engine-bg);
  border: var(--rt-stroke-4) solid var(--rt-engine-border);
  border-radius: var(--rt-radius-engine);
  box-shadow: var(--rt-shadow-card);
}
.rt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-2);
  padding: 8px 14px;
  background: var(--rt-grey-100);
  border-radius: var(--rt-radius-badge);
  font-family: var(--rt-font-ui);
  font-weight: 500;
  color: var(--rt-brand-slate-soft);
  text-transform: uppercase;
}
.rt-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  background: var(--rt-grey-100);
  border-radius: var(--rt-radius-pill);
  font-family: var(--rt-font-ui);
  font-weight: 500;
  color: var(--rt-brand-slate);
}
.rt-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: var(--rt-cream-50);
  border-radius: var(--rt-radius-badge);
  color: var(--rt-brand-slate-soft);
}