/* Romano Battiti Design System — Root Stylesheet
   Import this one file to get all tokens and font-face rules. */

@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/shadows.css";
@import "./tokens/animation.css";
@import "./tokens/responsive.css";
@import "./prose.css";

/* Border-box everywhere.
   The system's fields are `width: 100%` with horizontal padding for the
   chevron. Under the browser default (`content-box`) that padding is ADDED to
   the 100%, so the field overflows its column, and the borders are added to
   `--field-height`, so a padded field ends up 2px taller than a plain one.
   The design system owns this default instead of leaving each project to
   remember it — that is what made MultiSelect sit taller and wider than the
   Select beside it. Components also set it inline, so they survive on a page
   that resets it away. */
*, *::before, *::after { box-sizing: border-box; }

/* Visible focus on every focusable element.
   Zero specificity and `outline`, not `box-shadow`: no component sets
   `outline` inline, so this lands everywhere without !important and follows
   each element's own radius. Controls that draw their own ring (Select,
   Combobox, Chip, drag handles) set `outline: none` deliberately and take
   over with --focus-ring. Never remove one without providing the other. */
@supports selector(:focus-visible) {
  :where(a[href], button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-off);
  }
}

/* Windows high contrast (forced-colors).
   The mode replaces every author colour with the user's palette, so anything
   that carries STATE only through a fill loses it: a selected Chip, a checked
   Checkbox and an on Switch all flatten to the same box as their off state.
   The fix is not to fight the mode — it is to re-state those states in the one
   palette it keeps, the system colour keywords. `!important` is required here:
   the states are painted by inline styles, which nothing else can outrank.
   Alert, Tag and Badge need no rule — their tones each carry an icon or their
   own text, so meaning survives the strip. */
@media (forced-colors: active) {
  [role="switch"][aria-checked="true"],
  [role="switch"][aria-checked="true"] *,
  [aria-pressed="true"],
  [aria-current="page"],
  [aria-current="true"],
  [role="option"][aria-selected="true"],
  [role="tab"][aria-selected="true"] {
    background: Highlight !important;
    color: HighlightText !important;
    border-color: Highlight !important;
  }
  /* The switch track and knob, and the checkbox tick, ARE the state, so they
     keep their own colours instead of being flattened into the user palette.
     `~` rather than `+`: the switch paints a track and a knob, two siblings. */
  input[type="checkbox"] ~ span,
  input[type="radio"] ~ span {
    forced-color-adjust: none;
  }
  /* An outline is the only reliable focus indicator here — box-shadow rings
     are dropped entirely in this mode. */
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px !important; }
}

/* Continuous corners — large surfaces only.
   On a 36px control the superellipse thickens the border at the corners, so
   controls stay circular. Cards, modals and popovers opt in inline via
   `corner-shape: var(--corner-shape)`; project markup can use the attribute
   or class below. `--corner-shape: round` switches it off everywhere. */
@supports (corner-shape: squircle) {
  :where([data-surface], .rb-surface) { corner-shape: var(--corner-shape, round); }
}