/* Dialect design system tokens (https://www.figma.com/design/6DRThj0vmRgfjMIdsmkaIy) */
:root {
  /* Support both schemes; actual scheme is picked by the theme toggle setting
     `color-scheme` on <html> (see MainLayout's theme switch). */
  color-scheme: light dark;

  --dialect-primary: #e86c00;
  --dialect-secondary: #f6b93b;
  --dialect-bg: light-dark(#f4f6f9, #14171f);
  --dialect-surface: light-dark(#ffffff, #1c2029);
  --dialect-ink: light-dark(#14171f, #e6eaf0);
  --dialect-border: light-dark(#e6eaf0, #2b303b);
  --dialect-radius: 14px;
  /* light-dark() only takes 2 args, so each shadow layer gets its own light-dark()
     call and the layers are joined below (var() is a text substitution, so the
     comma-separated shadow list still parses correctly). */
  --dialect-shadow-1: light-dark(0 6px 20px rgba(20, 23, 31, 0.08), 0 6px 20px rgba(0, 0, 0, 0.35));
  --dialect-shadow-2: light-dark(0 1px 2px rgba(20, 23, 31, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3));
  --dialect-shadow: var(--dialect-shadow-1), var(--dialect-shadow-2);
  --dialect-navbar-shadow: light-dark(0 1px 3px rgba(20, 23, 31, 0.05), 0 1px 3px rgba(0, 0, 0, 0.3));

  /* Alias onto Aura's theming hooks */
  --aura-accent-color-light: var(--dialect-primary);
  --aura-accent-color-dark: var(--dialect-primary);
  --aura-background-color-light: var(--dialect-bg);
  --aura-background-color-dark: var(--dialect-bg);
  --aura-orange: var(--dialect-primary);
  --aura-yellow: var(--dialect-secondary);

  /* Flush, square app-layout content (no floating rounded card) */
  --aura-app-layout-inset: 0px;
  --aura-app-layout-radius: 0px;

  /* Minimal (near-square) control + overlay corners, overriding Aura's rounded defaults */
  --vaadin-radius-s: 1px;
  --vaadin-radius-m: 2px;
  --vaadin-radius-l: 2px;

  /* Sidebar defaults to width: auto (shrink-to-content) — force a real column width */
  --vaadin-app-layout-drawer-width: 260px;
}

/* Readonly/disabled fields: Aura's default cue is a dashed border, which reads
   as "incomplete" rather than "not editable". Use a solid muted border + tinted
   background instead (readonly: field-like but flat; disabled: same border, faded text). */
[readonly]::part(input-field) {
  border-style: solid;
  border-color: var(--dialect-border);
  background: var(--dialect-bg);
}

[readonly]:focus-within::part(input-field) {
  outline-style: solid;
}

[disabled]::part(input-field) {
  border-style: solid;
  border-color: var(--dialect-border);
}

[readonly]::part(checkbox),
[readonly]::part(radio-button) {
  border-style: solid;
}

/* Top bar: solid white, opaque, divider + soft shadow below.
   Separates it from the sidebar/content instead of blending into one surface. */
vaadin-app-layout::part(navbar) {
  background: var(--dialect-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--dialect-border);
  box-shadow: var(--dialect-navbar-shadow);
}

/* Sidebar: solid white, right divider separates it from the canvas */
vaadin-app-layout::part(drawer) {
  background: var(--dialect-surface);
  border-inline-end: 1px solid var(--dialect-border);
}

/* Canvas: gray, so white chrome and white cards both read against it */
vaadin-app-layout::part(content) {
  background: var(--dialect-bg);
  border: none;
}

.dialect-title {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--dialect-ink);
}

.dialect-content {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--lumo-space-l, 24px);
  gap: 24px;
}

.dialect-card {
  background: var(--dialect-surface);
  border-radius: var(--dialect-radius);
  box-shadow: var(--dialect-shadow);
  padding: 20px;
}

.dialect-card__title {
  font-weight: 600;
  color: var(--dialect-ink);
  margin: 0 0 12px 0;
}