/* Copied from repllama-v3 app/tokens.css (generated from docs/v3/design/tokens.json). Do not edit here: regenerate in repllama-v3 and copy again. */
/* GENERATED FILE. Do not edit by hand. */
/* Source: docs/v3/design/tokens.json ("Rep Llama v3", tokens version 2). */
/* Regenerate: node tokens/generate.mjs */

/*
 * One custom property per token, --rl-<name>. Light is the default; dark
 * follows the system (prefers-color-scheme) unless <html> has data-theme="light"
 * or "dark", which overrides it. tokens-theme.css maps these into Tailwind.
 */

:root {
  color-scheme: light;

  /* Interface colours */
  /* background: The app ground behind everything. A warm off-white, not grey-blue. */
  --rl-background: #f7f6f3;
  /* surface: Cards, lists, fields, sheets, the header and the tab bar. */
  --rl-surface: #ffffff;
  /* surface-2: Recessed areas on a surface: neutral chips, tracks, image wells, the hover fill of quiet controls. */
  --rl-surface-2: #efede8;
  /* foreground: Headings and body text on background, surface and surface-2 (12.7:1 or better in both themes). The light value is the logo charcoal, the one black of the brand. */
  --rl-foreground: #1d1c1b;
  /* muted: Secondary text on background, surface and surface-2 (5.1:1 or better in both themes). */
  --rl-muted: #66625b;
  /* muted-2: Faintest text: placeholders, eyebrows, hints. 4.5:1 or better on background, surface and surface-2 in both themes. */
  --rl-muted-2: #6f6a62;
  /* border: Hairlines that separate: card edges, list dividers. Decorative; never the only edge of a control. */
  --rl-border: #e4e1db;
  /* border-strong: A heavier divider, and the edge of a locked or disabled item. Decorative. */
  --rl-border-strong: #cfcbc3;
  /* border-control: The edge of anything you type in or toggle: fields, checkboxes, outlined buttons. 3.1:1 or better on background, surface and surface-2 in both themes. */
  --rl-border-control: #8a857c;
  /* brand: The one action colour: primary buttons, links, the active tab, selection. A deeper shade of the logo blue (#3f7fef is 3.8:1 on white, too light for text). As text it reads on every ground (4.5:1 or better). */
  --rl-brand: #1562eb;
  /* brand-hover: Hover and pressed state of a brand fill, and text on brand-subtle (5.4:1 or better). */
  --rl-brand-hover: #1157d1;
  /* brand-fg: Text and icons on a brand fill (5.2:1 light, 6.5:1 dark). It flips to charcoal in dark. */
  --rl-brand-fg: #ffffff;
  /* brand-subtle: Quiet tint for selected rows and chips. Text on it is brand-hover, not brand. */
  --rl-brand-subtle: #e7effd;
  /* ring: Focus ring: a solid 2px outline, 2px offset, on every interactive element. */
  --rl-ring: var(--rl-brand);
  /* sky-dawn-top: The top of the dawn sky at the sign-in hello and in the app icon. Fixed; never follows the theme. */
  --rl-sky-dawn-top: #e0336f;
  /* sky-dawn-bottom: The foot of the dawn sky at the sign-in hello and in the app icon. Fixed; never follows the theme. */
  --rl-sky-dawn-bottom: #f3a35a;
  /* success: Success icons and fills on background and surface (3.3:1 or better). For success words use success-strong. */
  --rl-success: #1b9a66;
  /* success-strong: Success words on success-subtle, surface and background (4.6:1 or better). */
  --rl-success-strong: #157a51;
  /* success-subtle: Ground of a success pill or notice. */
  --rl-success-subtle: #e3f4ec;
  /* warning: Warning icons and fills on background and surface (3.1:1 or better in light; under 3:1 on surface-2). For warning words use warning-strong. */
  --rl-warning: #b4830f;
  /* warning-strong: Warning words on warning-subtle, surface and background (4.6:1 or better). */
  --rl-warning-strong: #8a640b;
  /* warning-subtle: Ground of a warning pill or notice. */
  --rl-warning-subtle: #fbf0d4;
  /* danger: Error icons, fills and invalid-field edges (3.6:1 or better). A red, not the logo pink. For error words use danger-strong. */
  --rl-danger: #d8493c;
  /* danger-strong: Error words on danger-subtle, surface and background (4.6:1 or better). */
  --rl-danger-strong: #b83e33;
  /* danger-subtle: Ground of an error pill or notice. */
  --rl-danger-subtle: #fbe7e4;

  /* Brand and mascot colours. Fixed ones never follow the theme. */
  /* ink: The brand's one black: the light logo, the mascot's outlines, the icon's features. Fixed; never follows the theme. For UI text use foreground. */
  --rl-ink: #1d1c1b;
  /* mascot-white: The llama. Fixed; never follows the theme. */
  --rl-mascot-white: #ffffff;
  /* mascot-slate: Every shadow and dark fill on the mascot: ground shadow, far legs, inner ears, chin shadow. Fixed. */
  --rl-mascot-slate: #3a3f47;
  /* mascot-ground: The panel the mascot stands on. Stays light in dark theme, because the ink outlines and slate shadows vanish on a dark ground. */
  --rl-mascot-ground: #f7f6f3;

  /*
   * PERSONALITY ONLY: the logo's letter colours, for the mark, the blanket,
   * the mascot, the dawn sky and illustrations. Never a button, a link, a
   * record colour or text. The action colour is --rl-brand.
   */
  --rl-logo-pink: #e0336f; /* personality only */
  --rl-logo-blue: #3f7fef; /* personality only */
  --rl-logo-yellow: #e3a01c; /* personality only */
  --rl-logo-teal: #119c8f; /* personality only */
  --rl-logo-orange: #ec7a1c; /* personality only */

  /* Type families. The app loads the faces with next/font (app/layout.tsx). */
  --rl-font-serif: "Young Serif", Georgia, serif;
  --rl-font-sans: "Figtree", system-ui, -apple-system, Roboto, sans-serif;
  --rl-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Spacing */
  --rl-space-xs: 4px;
  --rl-space-sm: 8px;
  --rl-space-md: 12px;
  --rl-space-lg: 16px;
  --rl-space-xl: 24px;
  --rl-space-2xl: 32px;
  --rl-space-3xl: 48px;

  /* Radius */
  --rl-radius-sm: 8px;
  --rl-radius-md: 12px;
  --rl-radius-lg: 16px;
  --rl-radius-full: 9999px;

  /* Shadow */
  --rl-shadow-raised: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

  /* Sizes */
  --rl-touch-min: 44px;
  --rl-control-sm: 36px;
  --rl-control: 44px;
  --rl-control-lg: 48px;
  --rl-header-height: 56px;
  --rl-tab-bar-height: 64px;
  --rl-content-max: 1280px;

  /* Mascot drawing units (unitless, on the mascot canvas) */
  --rl-mascot-canvas: 2048;
  --rl-mascot-line: 12;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --rl-background: #161514;
    --rl-surface: #1f1e1c;
    --rl-surface-2: #2a2826;
    --rl-foreground: #f2efe9;
    --rl-muted: #b3ada3;
    --rl-muted-2: #9a948a;
    --rl-border: #33302c;
    --rl-border-strong: #45413c;
    --rl-border-control: #7a746b;
    --rl-brand: #71a0f3;
    --rl-brand-hover: #8fb6f6;
    --rl-brand-fg: #1d1c1b;
    --rl-brand-subtle: #1c2a44;
    --rl-ring: var(--rl-brand);
    --rl-logo-pink: #e65d8d;
    --rl-logo-blue: #71a0f3;
    --rl-logo-yellow: #e8b144;
    --rl-logo-teal: #14b8a8;
    --rl-logo-orange: #ef9347;
    --rl-success: #34c58a;
    --rl-success-strong: #34c58a;
    --rl-success-subtle: #0f3325;
    --rl-warning: #e0a52e;
    --rl-warning-strong: #e0a52e;
    --rl-warning-subtle: #3a2d10;
    --rl-danger: #f0625a;
    --rl-danger-strong: #f0625a;
    --rl-danger-subtle: #3a1a18;
    --rl-mascot-ground: #efede8;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --rl-background: #161514;
  --rl-surface: #1f1e1c;
  --rl-surface-2: #2a2826;
  --rl-foreground: #f2efe9;
  --rl-muted: #b3ada3;
  --rl-muted-2: #9a948a;
  --rl-border: #33302c;
  --rl-border-strong: #45413c;
  --rl-border-control: #7a746b;
  --rl-brand: #71a0f3;
  --rl-brand-hover: #8fb6f6;
  --rl-brand-fg: #1d1c1b;
  --rl-brand-subtle: #1c2a44;
  --rl-ring: var(--rl-brand);
  --rl-logo-pink: #e65d8d;
  --rl-logo-blue: #71a0f3;
  --rl-logo-yellow: #e8b144;
  --rl-logo-teal: #14b8a8;
  --rl-logo-orange: #ef9347;
  --rl-success: #34c58a;
  --rl-success-strong: #34c58a;
  --rl-success-subtle: #0f3325;
  --rl-warning: #e0a52e;
  --rl-warning-strong: #e0a52e;
  --rl-warning-subtle: #3a2d10;
  --rl-danger: #f0625a;
  --rl-danger-strong: #f0625a;
  --rl-danger-subtle: #3a1a18;
  --rl-mascot-ground: #efede8;
}