@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-600);
  --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-ink is white in both modes, so the checkbox glyph is a white
     stroke in both modes too (the default theme flips it with the mode). */
  --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. ------------- */

@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:   #ffffff;
    --accent-edge:  var(--elements-blue-800);
  }
}

:root[data-theme="dark"] {
  --accent:       var(--elements-blue-500);
  --accent-deep:  var(--elements-blue-400);
  --accent-soft:  var(--elements-blue-950);
  --accent-ink:   #ffffff;
  --accent-edge:  var(--elements-blue-800);
}
}