/* Classic Angular Material look (Material 2 shapes: 4 px corners, uppercase
   buttons, elevation instead of rounding; M3 colour roles) on top of style.css.
   Only colour tokens and component shapes are overridden here; removing the
   <link> to this file in templates/_layout.html (or reverting its commit)
   restores the previous design. Colours: M3 scheme from the seed #0ea5e9. */

@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/roboto-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/roboto-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* M3 roles */
  --md-primary: #00658f; --md-on-primary: #ffffff;
  --md-primary-container: #c8e6ff; --md-on-primary-container: #001e2e;
  --md-secondary-container: #d4e4f6; --md-on-secondary-container: #0d1d2a;
  --md-surface: #f7f9ff; --md-surface-low: #f1f4f9; --md-surface-container: #ebeef3; --md-surface-high: #e5e8ed;
  --md-on-surface: #181c20; --md-on-surface-variant: #41484d; --md-outline: #71787e; --md-outline-variant: #c1c7ce;
  --md-elev-1: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
  --md-elev-2: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
  --md-elev-3: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px rgb(0 0 0 / 30%);
  /* mapped onto the tokens of style.css */
  --bg: var(--md-surface); --bg-soft: var(--md-surface-container); --bg-card: var(--md-surface-low);
  --text: var(--md-on-surface); --muted: var(--md-on-surface-variant); --border: var(--md-outline-variant);
  --accent: var(--md-primary); --accent-hover: #004c6d; --accent-soft: var(--md-primary-container); --on-accent: var(--md-on-primary);
  --shadow: var(--md-elev-1); --radius: 4px;
}
:root[data-theme="dark"] {
  --md-primary: #89ceff; --md-on-primary: #00344c;
  --md-primary-container: #004c6d; --md-on-primary-container: #c8e6ff;
  --md-secondary-container: #374955; --md-on-secondary-container: #d4e4f6;
  --md-surface: #101417; --md-surface-low: #181c20; --md-surface-container: #1c2024; --md-surface-high: #272a2e;
  --md-on-surface: #e0e3e8; --md-on-surface-variant: #c1c7ce; --md-outline: #8b9198; --md-outline-variant: #41484d;
  --code-bg: #0b0f12;
  /* repeated: style.css's dark block is as specific as this one */
  --bg: var(--md-surface); --bg-soft: var(--md-surface-container); --bg-card: var(--md-surface-low);
  --text: var(--md-on-surface); --muted: var(--md-on-surface-variant); --border: var(--md-outline-variant);
  --accent: var(--md-primary); --accent-hover: #b4dfff; --accent-soft: var(--md-primary-container); --on-accent: var(--md-on-primary);
  --shadow: 0 1px 3px 1px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 30%);
}

body { letter-spacing: .01em; }
h1, h2, h3 { letter-spacing: 0; }
h1 { font-weight: 400; }
h2 { font-weight: 400; }
h3 { font-weight: 500; }
.eyebrow { font-weight: 500; letter-spacing: .1em; }

/* top app bar */
.site-header { background: var(--md-surface-container); border-bottom: 0; box-shadow: none; }
.nav a { border-radius: 4px; font-weight: 500; }
.theme-toggle { border: 0; width: 40px; height: 40px; } /* icon buttons stay round, as in Angular Material */
.theme-toggle:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }

/* buttons: filled and outlined, fully rounded, state layer on hover */
.btn { border-radius: 4px; border: 0; font-weight: 500; text-transform: uppercase; letter-spacing: .089em; font-size: .875rem; box-shadow: var(--md-elev-1);
  transition: box-shadow .15s, background-color .15s; }
.btn:hover { background: color-mix(in srgb, var(--md-primary) 92%, var(--md-on-primary)); box-shadow: var(--md-elev-2); }
.nav a.btn:hover { background: color-mix(in srgb, var(--md-primary) 92%, var(--md-on-primary)); }
.btn-ghost { background: transparent; color: var(--md-primary); border: 1px solid var(--md-outline); }
.btn-ghost:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); color: var(--md-primary); box-shadow: none; }
.btn-danger { border: 1px solid var(--danger); }

/* cards: elevated */
.card { border: 0; border-radius: 4px; background: var(--md-surface-low); box-shadow: var(--md-elev-1); }
.card.plan.popular { box-shadow: var(--md-elev-3); border-top: 4px solid var(--md-primary); outline: 0; }
.feature .icon { border-radius: 4px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.terminal { border-radius: 4px; box-shadow: var(--md-elev-3); }

/* outlined text fields */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea {
  border-radius: 4px; border: 1px solid var(--md-outline); background: transparent; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); }

/* chips and segmented buttons */
.demo-presets button { border-radius: 4px; background: transparent; color: var(--md-on-surface-variant);
  border: 1px solid var(--md-outline-variant); padding: 5px 12px; }
.demo-presets button:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.toggle { border-radius: 4px; border: 1px solid var(--md-outline); background: transparent; padding: 0; overflow: hidden; }
.toggle a { border-radius: 0; }
.toggle a.on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; }
.badge { border-radius: 2px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
.pill { border-radius: 4px; border-color: var(--md-outline-variant); }

/* navigation drawer (dashboard) */
.side a { border-radius: 4px; font-weight: 500; }
.side a.active { box-shadow: inset 3px 0 0 var(--md-primary); }
.side a.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* tables and soft sections on tonal surfaces */
.table-wrap { border: 0; box-shadow: var(--md-elev-1); border-radius: 4px; }
.alert, code.keytext, .stat, pre, .demo-canvas, .demo-tip, :not(pre) > code { border-radius: 4px; }
.section-soft { background: var(--md-surface-low); }
.demo-canvas { background: var(--md-surface); }
.terminal pre { font-size: .8rem; } /* Roboto is wider than the system font: keep the example without a scrollbar */