/* GENERATED FILE -- DO NOT EDIT.
 *
 * Verbatim copy of design/src/tokens.css. The waitlist has no build
 * step and so cannot import the design workspace. Regenerate with:
 *   make waitlist-tokens
 */
/*
 * corron design system — tokens
 *
 * Two layers:
 *   1. Ramps (--c-*)     : raw palette values. Never used directly by components.
 *   2. Semantic (--*)    : role-based tokens mapped from the ramps. Components
 *                          and product code consume ONLY these.
 *
 * Single theme: dark, charbon ground. See README.md for usage rules and
 * DIRECTION.md for the artistic direction these values implement.
 */

:root {
  /* ------------------------------------------------------------------ */
  /* Ramp: c-red — brick. Hard and desaturated, never orange-warm.      */
  /* Anchors from the direction: 300 brique clair, 800 brique rouge,    */
  /* 950 brique foncé.                                                  */
  /* ------------------------------------------------------------------ */
  --c-red-100: #f7e1e1;
  --c-red-200: #f4bfbf;
  --c-red-300: #f09595;
  --c-red-400: #d96a6a;
  --c-red-500: #bc4a4a;
  --c-red-600: #9e3737;
  --c-red-700: #8b2929;
  --c-red-800: #791f1f;
  --c-red-900: #641818;
  --c-red-950: #501313;

  /* ------------------------------------------------------------------ */
  /* Ramp: c-neutral — chalk to charcoal. Warm-tinted, never blue-gray. */
  /* Anchors: 100 craie, 500 acier, 900 charbon.                        */
  /* ------------------------------------------------------------------ */
  --c-neutral-100: #f1efe8;
  --c-neutral-200: #e2dfd5;
  --c-neutral-300: #c7c4b9;
  --c-neutral-400: #96948b;
  --c-neutral-500: #5f5e5a;
  --c-neutral-600: #4b4a47;
  --c-neutral-700: #403f3d;
  --c-neutral-800: #343432;
  --c-neutral-900: #2c2c2a;
  --c-neutral-950: #222221;

  /* ------------------------------------------------------------------ */
  /* Ramp: c-green — moss. Functional only (status: running/healthy).   */
  /* Desaturated to sit on charbon without glowing.                     */
  /* ------------------------------------------------------------------ */
  --c-green-300: #a9bf8b;
  --c-green-500: #7c9860;
  --c-green-700: #46543a;
  --c-green-900: #2f3829;

  /* ------------------------------------------------------------------ */
  /* Ramp: c-amber — ochre. Functional only (status: transitioning,     */
  /* paused, warnings).                                                 */
  /* ------------------------------------------------------------------ */
  --c-amber-300: #d9b36a;
  --c-amber-500: #b98e45;
  --c-amber-700: #57482a;
  --c-amber-900: #3a3222;

  /* ------------------------------------------------------------------ */
  /* Semantic: surfaces                                                 */
  /* ------------------------------------------------------------------ */
  --bg: var(--c-neutral-900);            /* page ground (charbon) */
  --bg-well: var(--c-neutral-950);       /* recessed: terminal, code blocks */
  --surface: var(--c-neutral-800);       /* cards, panels */
  --surface-raised: var(--c-neutral-700); /* modals, menus, hover surfaces */

  /* Semantic: structure */
  --border: var(--c-neutral-600);
  --border-strong: var(--c-neutral-500); /* acier — emphasized structure */

  /* Semantic: text */
  --text: var(--c-neutral-100);          /* craie */
  --text-muted: var(--c-neutral-300);
  --text-faint: var(--c-neutral-400);    /* decorative/labels only below 14px */

  /* Semantic: accent (brick) */
  --accent: var(--c-red-800);            /* interactive surfaces: buttons, active bars */
  --accent-hover: var(--c-red-700);
  --accent-active: var(--c-red-900);
  --accent-fg: var(--c-red-300);         /* brick as TEXT/icon on dark grounds */
  --accent-deep: var(--c-red-950);       /* dim brick fills */
  --accent-text: var(--c-neutral-100);   /* text ON an accent surface */

  /* Semantic: status */
  --ok: var(--c-green-300);
  --ok-dim: var(--c-green-900);
  --warn: var(--c-amber-300);
  --warn-dim: var(--c-amber-900);
  --danger: var(--c-red-300);
  --danger-dim: var(--c-red-950);
  --neutral-status: var(--c-neutral-400);
  --neutral-status-dim: var(--c-neutral-700);

  /* Semantic: focus */
  --focus: var(--c-red-400);

  /* ------------------------------------------------------------------ */
  /* Typography                                                         */
  /* ------------------------------------------------------------------ */
  --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --text-2xs: 11px; /* caps microtext: table headers, key labels */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;  /* body default */
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;

  --leading-tight: 1.35;
  --leading: 1.45;
  --tracking-caps: 0.06em;

  /* ------------------------------------------------------------------ */
  /* Geometry — dense 4px grid, hard corners                            */
  /* ------------------------------------------------------------------ */
  --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;

  --radius-sm: 2px;
  --radius-md: 4px; /* the maximum radius anywhere in the system */

  /* Structure comes from borders, not shadows. This is the single
     exception, for true overlays only. */
  --shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* -------------------------------------------------------------------- */
/* Base                                                                 */
/* -------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: var(--leading-tight);
}

p {
  margin: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
}

a {
  color: var(--accent-fg);
}

::selection {
  background: var(--accent);
  color: var(--accent-text);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* Caps microtext — the recurring label idiom (table headers, key-value
   keys, field labels). One class, reused everywhere. */
.c-microtext {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-faint);
}