/* Romano Battiti Design System — Color Tokens
   --color-primary is the single per-project override point.
   All structural tokens (surface, ink, border, shadow) stay fixed. */

:root {
  /* ── Per-project primary ── */
  /* Override just these two to rebrand any project:            */
  /*   :root { --color-primary: #your-color; }                  */
  --color-primary:     #F6C445;   /* amber — RB default signature */
  --color-primary-dim: #FBE7A6;   /* lighter tint (selections, bg) */

  /* ── Surfaces ── */
  --color-paper:       #E9EBF0;   /* page background */
  --color-surface:     #FFFFFF;   /* card / panel background */

  /* ── Ink ── */
  --color-ink:         #20222E;   /* primary text */
  --color-ink-soft:    #5A5F6E;   /* secondary / muted text */

  /* ── Borders ── */
  --color-hairline:    #E6E8EE;   /* borders, dividers */

  /* ── Semantic ──
     TEXT colours, and they are darker than the fills on purpose: measured on
     their own tint, the old pair failed AA (#C0453B on #FBEBE9 was 4.37, and
     #2F7D5B on #E7F3EC was 4.38 — both just under 4.5, which is exactly how a
     contrast failure survives a review). These values clear 4.5 on the tint,
     on --color-paper and on --color-surface. The --fill-* pair below keeps the
     original, more saturated colour: a fill is judged against its ON-colour,
     not against a tint. */
  --color-danger:      #B63F35;   /* 4.84:1 on --color-danger-tint */
  --color-danger-tint: #FBEBE9;
  --color-success:     #2B7355;   /* 5.0:1 on --color-success-tint */
  --color-success-tint:#E7F3EC;
  /* The third band. The system had danger and success and nothing between
     them, so "careful" had to borrow --color-primary — which works for a band
     of colour with nothing on it and fails the moment it has to be TEXT (amber
     ink is 1.6:1 on paper). Orange, not amber: warning must not read as the
     brand accent sitting next to it. */
  --color-warning:     #9A4E12;   /* 5.3:1 on --color-warning-tint, 6.0:1 on white */
  --color-warning-tint:#FBEDE0;

  /* ── FILL + ON-FILL PAIRS ───────────────────────────────────────────
     A solid accent surface keeps the SAME colour in light and dark mode,
     so the ink on top of it is fixed too. Never put --color-ink on a
     fill: it flips to near-white in dark mode and dies on amber (1.6:1).
     Rule: background var(--fill-X)  →  color var(--color-on-X). Always. */
  --fill-primary:      var(--color-primary);  /* #F6C445 */
  --fill-danger:       #C0453B;
  --fill-success:      #2F7D5B;
  --fill-warning:      #E07B26;

  --color-on-primary:  #20222E;   /* 10.1:1 on #F6C445 */
  --color-on-danger:   #FFFFFF;   /*  5.1:1 on #C0453B */
  --color-on-success:  #FFFFFF;   /*  5.2:1 on #2F7D5B */
  --color-on-warning:  #20222E;   /*  5.3:1 on #E07B26 */

  /* ── Scrim (modal backdrop, drawer, any blocking overlay) ──
     One pair for every overlay in the system, so the drawer and the modal
     darken the page by exactly the same amount. Ink at 50%, not black: pure
     black reads as a rendering glitch over a warm paper background.
     The 4px blur is what says "this layer is out of reach" — it kills the
     legibility of the text underneath, which stops the eye from trying to
     read it. It is decoration with a job; do not raise it (above ~6px the
     page turns to mush and the layer stops feeling connected to what it
     covers) and do not drop it on the drawer to save a repaint. */
  --color-scrim:       rgba(32, 34, 46, 0.5);
  --scrim-blur:        4px;

  /* ── Focus ring ──
     Two shapes for one idea. The OUTLINE is the automatic one: styles.css
     applies it to every focusable element, and because no component sets
     `outline` inline, it lands everywhere for free and follows the element's
     own radius. The BOX-SHADOW version is for controls that draw their own
     ring as part of a filled field (Select, Combobox, Chip): those set
     `outline: none` deliberately and take over. */
  --focus-outline:     2px solid var(--color-primary);
  --focus-outline-off: 2px;
  --focus-ring:        0 0 0 3px color-mix(in srgb, var(--color-primary) 45%, transparent);
  --focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--color-danger) 40%, transparent);

  /* ── Semantic aliases ── */
  --bg-page:      var(--color-paper);
  --bg-surface:   var(--color-surface);
  --fg-1:         var(--color-ink);
  --fg-2:         var(--color-ink-soft);
  --border:       var(--color-hairline);
  --accent:       var(--color-primary);
  --accent-dim:   var(--color-primary-dim);
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --color-paper:         #15161C;
  --color-surface:       #1E2029;
  --color-ink:           #E6E8EE;
  --color-ink-soft:      #A0A4B2;
  --color-hairline:      #2E313C;
  --color-danger:        #E07268;
  --color-danger-tint:   #3A211F;
  --color-success:       #5FB98C;
  --color-success-tint:  #1E2E26;
  --color-warning:       #E9A05C;   /* 6.7:1 on --color-warning-tint */
  --color-warning-tint:  #38251A;
  /* --color-primary stays the same in dark mode by default.
     --fill-* and --color-on-* are deliberately NOT redefined here. */

  /* Tints DO flip with the theme (they are surfaces, not fills), so the
     text on a tint is the theme ink — that pairing stays legible. */
  --color-primary-dim:   #40350F;   /* 10.0:1 with --color-ink #E6E8EE */

  /* Ink at 50% over an already dark page barely separates the layers, so the
     dark scrim goes to black and deeper. */
  --color-scrim:         rgba(0, 0, 0, 0.62);
}