@layer tokens {
/* =============================================================================
   @elements/style — Elements brand theme

   OPT-IN — not part of the default entry point. Imported AFTER
   themes/default.css. Repoints --accent at the Elements blue ramp. Also the
   canonical example of how a customer would brand their own app: define a
   brand ramp + repoint --accent. See themes/customer-example.css for the
   documented pattern.

   Usage:
     @import "@elements/style";
     @import "@elements/style/themes/elements";
============================================================================= */

:root {

  /* Elements blue ramp
     Brand exact: #49A9E7 at 500, #164C77 at 900. Ramp generated in OKLCH
     around them. Same lightness curve as the neutral and status ramps in
     themes/default.css. ---------------------------------------------------- */

  --elements-blue-50:   oklch(0.97 0.015 235);
  --elements-blue-100:  oklch(0.93 0.035 235);
  --elements-blue-200:  oklch(0.87 0.060 235);
  --elements-blue-300:  oklch(0.80 0.090 235);
  --elements-blue-400:  oklch(0.73 0.115 235);
  --elements-blue-500:  #49A9E7;
  --elements-blue-600:  oklch(0.58 0.130 235);
  --elements-blue-700:  oklch(0.48 0.120 235);
  --elements-blue-800:  oklch(0.38 0.100 235);
  --elements-blue-900:  #164C77;
  --elements-blue-950:  oklch(0.18 0.060 235);

  /* Brand override — repoint --accent at the Elements blue ramp ----------- */

  --accent:       var(--elements-blue-700);
  --accent-deep:  var(--elements-blue-800);
  --accent-soft:  var(--elements-blue-50);
  --accent-ink:   #ffffff;
  --accent-edge:  var(--elements-blue-200);

  --focus:        var(--accent);
  --focus-ring:   0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

  /* --accent is 700, not the 500 that carries the brand. --accent is a fill
     behind white text and a foreground on the page, and both readings are the
     same ratio: white on 500 is 2.6:1 and on 600 is 4.2:1, both under WCAG AA.
     700 is 6.3:1. 500 stays the brand color, and dark mode uses it as the
     accent because there the text on it is dark.

     The checkbox glyph is a stroke color, not a token, so it has to be
     restated wherever --accent-ink changes. White here, brand-950 in the two
     dark blocks below. */
  --checkbox-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
}

/* Dark mode — same two-block pattern as themes/default.css.

   The accent goes back to 500, the brand color, because a light blue reads
   well on a near-black page. That flips what sits on top of it: --accent-ink
   is brand-950, which is 7.2:1 on the 500 fill and 7.9:1 on the 400 hover,
   where white was 2.6:1. ------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:       var(--elements-blue-500);
    --accent-deep:  var(--elements-blue-400);
    --accent-soft:  var(--elements-blue-950);
    --accent-ink:   var(--elements-blue-950);
    --accent-edge:  var(--elements-blue-800);
    --checkbox-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23001428' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] {
  --accent:       var(--elements-blue-500);
  --accent-deep:  var(--elements-blue-400);
  --accent-soft:  var(--elements-blue-950);
  --accent-ink:   var(--elements-blue-950);
  --accent-edge:  var(--elements-blue-800);
  --checkbox-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23001428' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
}
}