/* ============================================================================
   riltt design tokens — the single source of truth for colour, radius, type.
   Imported by public/riltt.css (marketing site) and linked directly by
   translator.html (the app), which maps these onto its own local aliases.
   Change a brand value HERE and it changes everywhere.
   ========================================================================= */

:root {
  /* Canvas */
  --paper: #FAF5EC;
  --paper-deep: #F3ECDF;
  --butter: #F4EFE2;      /* alternate band ground — warm neutral, not yellow */
  --card: #FFFFFF;
  --ink: #1D1A14;
  --ink-soft: rgba(46, 40, 29, 0.66);
  --ink-faint: rgba(46, 40, 29, 0.42);
  --line: rgba(29, 26, 20, 0.14);
  --line-strong: rgba(29, 26, 20, 0.85);

  /* Language colours — the "products" of riltt. Each language owns one. */
  --tomato: #E8452B;
  --tomato-tint: #FBDED7;
  --cobalt: #2B50DF;
  --cobalt-tint: #DDE3FB;
  --leaf: #12945B;
  --leaf-tint: #D9F0E3;
  --pink: #EF4D8E;
  --pink-tint: #FCDDEA;
  --marigold: #F5A518;
  --marigold-tint: #FDEBC9;
  --marigold-ink: #8A5A02;  /* legible marigold for text */
  --violet: #7A45E5;
  --violet-tint: #E7DDFB;
  --teal: #0D9DA4;
  --teal-tint: #D6EFF0;
  --teal-deep: #108474;     /* primary action: teal on cream, teal fills under WHITE text */

  /* The band ground — a teal surface that has to carry CREAM text.
     --teal-deep cannot: cream on #108474 is 4.23:1, and our band headings (17px/700) sit under
     WCAG's 18.66px large-text threshold, so they need the full 4.5:1, not 3:1. These are the same
     hue taken deep enough to clear AA: cream on #0A5F53 is 6.97:1.
     A band darkens into teal on hover — never into ink, which would put a black slab back on cream. */
  --teal-band: #0A5F53;
  --teal-band-hover: #084A40;

  /* Tight, flat radii — cards sit down on the page, they don't float.
     One concentric scale. Corners get TIGHTER as you nest inward, never looser:
       modal shell 20 -> card/pane 12 -> control/input 8 -> tag/chip 4
     Buttons and badges are pills; icon buttons are circles. */
  --radius-xl: 20px;   /* modal / drawer shell */
  --radius-lg: 16px;
  --radius-md: 12px;   /* cards, panes, messages */
  --radius-sm: 8px;    /* inputs, inner controls */
  --radius-xs: 4px;    /* tags, chips */
  --radius-pill: 999px;

  --font: 'Schibsted Grotesk', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
}