/* Roz — shared tokens
 * Lifted from marketing/style.css + app/public/static/css/app.css
 * so decks, mockups, and prototypes can vary on tokens, not styles.
 * Fonts are loaded via <link> in each page's <head>, not @import here, to
 * avoid duplicate font requests and to keep CSS off the critical render
 * waterfall.
 *
 * GENERATED FILE — do not edit by hand.
 * Source of truth: packages/design-tokens/tokens.json
 * Regenerate: pnpm --filter @stitchai/design-tokens run build
 */

:root {
  /* ── Warm-stone neutral scale ── */
  --stone-50: oklch(0.97 0.005 70);
  --stone-100: oklch(0.94 0.008 70);
  --stone-200: oklch(0.88 0.010 70);
  --stone-300: oklch(0.80 0.012 65);
  --stone-500: oklch(0.55 0.015 60);
  --stone-700: oklch(0.35 0.020 55);
  --stone-900: oklch(0.18 0.020 50);

  /* ── Accents (brand + semantic). amber = primary brand accent, sage = success/ok, rose = error/overbook/critical, clay = warm secondary, slate = cool secondary, indigo = AI/ML surfaces. ── */
  --amber: oklch(0.72 0.16  70);
  --amber-dim: oklch(0.72 0.16  70 / 0.10);
  --sage: oklch(0.62 0.08 155);
  --sage-dim: oklch(0.62 0.08 155 / 0.10);
  --rose: oklch(0.58 0.12  15);
  --rose-dim: oklch(0.58 0.12  15 / 0.10);
  --clay: oklch(0.60 0.10  45);
  --clay-dim: oklch(0.60 0.10  45 / 0.10);
  --slate: oklch(0.55 0.04 250);
  --slate-dim: oklch(0.55 0.04 250 / 0.10);
  --indigo: oklch(0.52 0.12 265);
  --indigo-dim: oklch(0.52 0.12 265 / 0.10);

  /* ── Roster plane identity. live = published/settled -> sage, draft = work-in-progress -> amber, actuals = Deputy clock-ons -> slate. Not present in marketing (marketing has no roster surface). ── */
  --plane-live: var(--sage);
  --plane-live-dim: var(--sage-dim);
  --plane-draft: var(--amber);
  --plane-draft-dim: var(--amber-dim);
  --plane-actuals: var(--slate);
  --plane-actuals-dim: var(--slate-dim);

  /* ── Messaging channel identity. notes = internal shift note (stone), comms = manager<->staff broadcast (amber), inbox = incoming reply/thread (slate). Not present in marketing. ── */
  --channel-notes: var(--stone-500);
  --channel-notes-dim: oklch(0.55 0.015 60 / 0.10);
  --channel-comms: var(--amber);
  --channel-comms-dim: var(--amber-dim);
  --channel-inbox: var(--slate);
  --channel-inbox-dim: var(--slate-dim);

  /* ── Role palette (customer app). Identical across all three targets. ── */
  --role-vet: var(--sage);
  --role-nurse: oklch(0.58 0.12 230);
  --role-aa: var(--amber);
  --role-reception: oklch(0.62 0.08 280);
  --role-admin: var(--rose);
  --role-management: oklch(0.45 0.06 260);
  --role-locum: var(--stone-500);

  /* ── One colour per person (Roz web redesign, concept D). Staff index mod 8, the same on every page. Distinct hues at matched lightness; indigo (265) stays clear for Roz. ── */
  --person-1: oklch(0.58 0.15 28);
  --person-2: oklch(0.60 0.13 150);
  --person-3: oklch(0.57 0.13 228);
  --person-4: oklch(0.66 0.14 85);
  --person-5: oklch(0.58 0.16 340);
  --person-6: oklch(0.60 0.10 195);
  --person-7: oklch(0.55 0.13 305);
  --person-8: oklch(0.52 0.07 55);

  /* ── Fixed official brand colours for messaging channel marks. App only. ── */
  --channel-telegram: #229ed9;
  --channel-whatsapp: #25d366;
  --channel-imessage: #007aff;
  --channel-msteams: #6264a7;

  /* ── Semantic surface + text. React names the card/surface colour --bg-card instead of --surface (same value, different name — historical, not worth a breaking rename). ── */
  --bg: var(--stone-50);
  --bg-2: var(--stone-100);
  --bg-3: var(--stone-200);
  --surface: #fff;
  --text: var(--stone-900);
  --text-2: var(--stone-500);
  --text-3: var(--stone-300);
  --border: var(--stone-200);
  --border-2: var(--stone-300);

  /* ── Corner radius. ── */
  --r: 10px;
  --r-sm: 6px;

  /* ── Warm, low shadows. --shadow-hero is not used inside the roster canvas, so react omits it. ── */
  --shadow-card: 0 8px 32px oklch(0.18 0.02 50 / 0.06);
  --shadow-hero: 0 32px 64px oklch(0.18 0.02 50 / 0.20);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ── Type families. React quotes font names with double quotes (Biome/Prettier CSS style in that package); app and marketing use single quotes. Same fonts, cosmetic quote-style difference only. ── */
  --font: 'Red Hat Text', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: 'Red Hat Display', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* ── Type scale (display / UI). React only needs the sizes actually used inside the roster canvas. ── */
  --fs-eyebrow: 11px;
  --fs-micro: 10px;
  --fs-meta: 12px;
  --fs-body: 14px;
  --fs-body-lg: 15px;
  --fs-hero-sub: clamp(1rem, 1.4vw, 1.05rem);
  --fs-h3: 15px;
  --fs-h2: clamp(1.4rem, 2.8vw, 2rem);
  --fs-h1: clamp(1.6rem, 3vw, 2.2rem);
  --fs-hero: clamp(2.4rem, 4.5vw, 3.6rem);

  /* ── Line-height, tracking, and layout constants. Marketing-and-app only — react's roster canvas doesn't use the marketing type rhythm or the app shell's sidebar/topbar sizing. ── */
  --lh-tight: 1.06;
  --lh-snug: 1.15;
  --lh-body: 1.6;
  --lh-loose: 1.7;
  --track-hero: -0.04em;
  --track-h: -0.03em;
  --track-ui: -0.02em;
  --track-eyebrow: 0.06em;
  --sidebar-w: 240px;
  --topbar-h: 56px;
}

/* ── Semantic text classes ── */
.h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800; letter-spacing: var(--track-h); line-height: var(--lh-snug); color: var(--text); }
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--track-h); line-height: var(--lh-snug); color: var(--text); }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--text); }
.hero-display { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 800; letter-spacing: var(--track-hero); line-height: var(--lh-tight); color: var(--text); }
.p  { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--text-2); }
.p-lg { font-family: var(--font); font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--text-2); }
.eyebrow-text { font-family: var(--mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--amber); background: var(--amber-dim); padding: 3px 8px; border-radius: 4px; display: inline-block; }
.mono { font-family: var(--mono); font-size: var(--fs-meta); color: var(--text-2); }
.micro { font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }