/* RoCode design tokens (2026-10-02).
   The one source for colour, type, spacing, radii, sizes, elevation and layering on
   every page: marketing, login, account, chat and admin. Linked first in <head>; page
   stylesheets read --rc-* and do not define raw colours or sizes of their own.
   Primitives first (named by ramp step), semantic roles after (named by job). */

/* Inter, self-hosted (Inter v20 variable, SIL OFL), latin + latin-ext, weights 100 to 900 in one file each. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* ---------- primitives: neutral ramp ----------
     The brand violet's own hue (about 258) at low saturation: near-black with an
     aubergine undertone, never pure grey, never a purple wash. */
  --rc-n-0:   #0b0a0e;   /* sunken: code wells, video stage */
  --rc-n-50:  #0e0c13;   /* canvas */
  --rc-n-100: #15131b;   /* surface: cards, panels, sidebars */
  --rc-n-150: #1b1821;   /* raised: menus, popovers, inputs on a surface */
  --rc-n-200: #232029;   /* selected neutral, pressed */
  --rc-n-500: #6b6676;   /* disabled text only (exempt from contrast) */
  --rc-n-600: #8c8799;   /* tertiary text: 5.6:1 on the canvas, 4.6:1 on --rc-n-200 */
  --rc-n-700: #b6b0c4;   /* secondary text: 9.3:1 */
  --rc-n-900: #f2f0f7;   /* primary text: 17:1 */

  /* ---------- primitives: brand violet (unchanged brand values) ---------- */
  --rc-violet-300: #c4b5fd;
  --rc-violet-400: #a78bfa;
  --rc-violet-500: #8b5cf6;
  --rc-violet-550: #8448f1;   /* hover fill: one step lighter, white text still 5.0:1 */
  --rc-violet-600: #7c3aed;
  --rc-violet-700: #6d28d9;
  --rc-violet-800: #5b21b6;

  /* ---------- surfaces ---------- */
  --rc-bg: var(--rc-n-50);
  --rc-bg-sunken: var(--rc-n-0);
  --rc-surface: var(--rc-n-100);
  --rc-surface-raised: var(--rc-n-150);
  --rc-surface-selected: var(--rc-n-200);
  --rc-hover: rgba(236, 231, 250, .045);      /* wash for hover on any surface */
  --rc-press: rgba(236, 231, 250, .075);
  --rc-scrim: rgba(6, 5, 9, .72);             /* behind modals and drawers */

  /* ---------- lines ---------- */
  --rc-line: rgba(233, 226, 250, .075);       /* hairlines: rows, section rules, card edges */
  --rc-line-strong: rgba(233, 226, 250, .13); /* control borders */
  --rc-line-hover: rgba(233, 226, 250, .22);

  /* ---------- text ---------- */
  --rc-text: var(--rc-n-900);
  --rc-text-2: var(--rc-n-700);
  --rc-text-3: var(--rc-n-600);
  --rc-text-disabled: var(--rc-n-500);

  /* ---------- accent: purple is for action, selection and focus only ---------- */
  --rc-accent: var(--rc-violet-500);
  --rc-accent-text: var(--rc-violet-400);       /* links and accent labels: 7.1:1 on the canvas */
  --rc-accent-strong: var(--rc-violet-300);     /* accent text on --rc-accent-soft */
  --rc-accent-fill: var(--rc-violet-600);       /* primary buttons: white text 5.7:1 */
  --rc-accent-fill-hover: var(--rc-violet-550);
  --rc-accent-fill-press: var(--rc-violet-700);
  --rc-accent-soft: rgba(139, 92, 246, .14);    /* selected row / chip background */
  --rc-accent-line: rgba(139, 92, 246, .45);    /* selected border */
  --rc-on-accent: #ffffff;
  --rc-focus: var(--rc-violet-400);

  /* ---------- status (meaning only, never decoration) ---------- */
  --rc-success: #5cd48e;
  --rc-success-soft: rgba(92, 212, 142, .12);
  --rc-success-line: rgba(92, 212, 142, .32);
  --rc-warning: #f2b55a;
  --rc-warning-soft: rgba(242, 181, 90, .12);
  --rc-warning-line: rgba(242, 181, 90, .32);
  --rc-danger: #f37b7b;
  --rc-danger-soft: rgba(243, 123, 123, .12);
  --rc-danger-line: rgba(243, 123, 123, .34);

  /* ---------- code (Luau highlighting on guides and product mocks) ---------- */
  --rc-code-keyword: var(--rc-violet-300);
  --rc-code-string: #9be3b0;
  --rc-code-number: #f5d28a;
  --rc-code-comment: var(--rc-text-3);
  --rc-code-global: #f0c3e6;

  /* ---------- type ---------- */
  --rc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rc-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --rc-fs-meta: 12px;      /* the floor: badges, timestamps, table meta */
  --rc-fs-caption: 13px;   /* captions, helper text, column headers */
  --rc-fs-small: 14px;     /* secondary copy, nav, chips, dense tables */
  --rc-fs-ui: 15px;        /* app body, buttons, inputs */
  --rc-fs-body: 16px;      /* marketing body */
  --rc-fs-title: 17px;     /* component titles */
  --rc-fs-prose: 17px;     /* long-form reading (guides, docs) */
  --rc-fs-lead: 18px;      /* lead paragraphs */
  --rc-fs-h3: 20px;
  --rc-fs-page: 28px;      /* app page titles */
  --rc-fs-h2: clamp(28px, 1.15rem + 1.35vw, 38px);
  --rc-fs-display: clamp(40px, 1.4rem + 3.15vw, 62px);

  --rc-fw-regular: 400;
  --rc-fw-medium: 500;
  --rc-fw-semibold: 600;

  --rc-lh-display: 1.06;
  --rc-lh-heading: 1.18;
  --rc-lh-snug: 1.4;
  --rc-lh-body: 1.6;

  --rc-ls-display: -0.035em;
  --rc-ls-heading: -0.024em;
  --rc-ls-title: -0.012em;
  --rc-ls-body: -0.006em;
  --rc-ls-tag: .04em;      /* the only tracking: 1 to 3 letter tags */

  /* ---------- space (4px base; named --rc-sp-* because style.css already owns --rc-space-* on another scale) ---------- */
  --rc-sp-1: 4px;
  --rc-sp-2: 8px;
  --rc-sp-3: 12px;
  --rc-sp-4: 16px;
  --rc-sp-5: 20px;
  --rc-sp-6: 24px;
  --rc-sp-8: 32px;
  --rc-sp-10: 40px;
  --rc-sp-12: 48px;
  --rc-sp-16: 64px;
  --rc-sp-20: 80px;
  --rc-sp-24: 96px;
  --rc-sp-32: 128px;

  /* ---------- radii ---------- */
  --rc-radius-xs: 6px;     /* tags, kbd, code chips */
  --rc-radius-sm: 8px;     /* chips, small controls */
  --rc-radius-md: 10px;    /* buttons, inputs */
  --rc-radius-lg: 14px;    /* menus, popovers, small panels */
  --rc-radius-xl: 18px;    /* cards */
  --rc-radius-2xl: 22px;   /* hero media, modals */
  --rc-radius-full: 999px; /* toggles, dots, avatars only */

  /* ---------- sizes ---------- */
  --rc-control-sm: 32px;
  --rc-control-md: 40px;
  --rc-control-lg: 48px;
  --rc-tap: 44px;          /* minimum touch target */
  --rc-container: 1200px;
  --rc-container-narrow: 960px;
  --rc-prose: 720px;
  --rc-gutter: 24px;
  --rc-nav-h: 64px;

  /* ---------- elevation: only things that float get a shadow ---------- */
  --rc-shadow-pop: 0 16px 40px -12px rgba(4, 2, 10, .66), 0 0 0 1px var(--rc-line-strong);
  --rc-shadow-modal: 0 32px 80px -24px rgba(4, 2, 10, .78), 0 0 0 1px var(--rc-line-strong);

  /* ---------- layers ---------- */
  --rc-z-sticky: 50;
  --rc-z-drawer: 60;
  --rc-z-popover: 80;
  --rc-z-modal: 100;
  --rc-z-toast: 120;

  /* ---------- motion: existing transitions only (no new animation in this pass) ---------- */
  --rc-dur: .16s;
  --rc-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 640px) {
  :root { --rc-gutter: 16px; }
}