/* src/styles/md3-tokens.css */
/* MD3-inspired tokens tuned for education: high readability, clear contrast, calm surfaces */
:root{
 /* Typography */
 --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 /* Spacing + shape */
 --radius-1: 10px;
 --radius-2: 16px;
 --radius-3: 22px;
 --shadow-1: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
 /* Color roles (keep simple) */
 --md-surface: #ffffff;
 --md-surface-2: #f6f7fb;
 --md-on-surface: #111318;
 --md-primary: #2f6fed; /* calm blue */
 --md-on-primary: #ffffff;
 --md-secondary: #5a5f72; /* muted */
 --md-on-secondary: #ffffff;
 --md-tertiary: #0f766e; /* teal for "practical" tools */
 --md-on-tertiary: #ffffff;
 --md-outline: #d7dbe7;
 --md-success: #1a7f37;
 --md-warning: #b54708;
 --md-danger: #b42318;
 /* Focus ring for accessibility */
 --md-focus: 0 0 0 3px rgba(47,111,237,.28);
}
@media (prefers-color-scheme: dark){
 :root{
 --md-surface: #0b0e14;
 --md-surface-2: #121725;
 --md-on-surface: #e8eaf2;
 --md-primary: #9bb6ff;
 --md-on-primary: #0b0e14;
 --md-secondary: #b8bccd;
 --md-on-secondary: #0b0e14;
 --md-tertiary: #4fd1c5;
 --md-on-tertiary: #0b0e14;
 --md-outline: #2b3244;
 --md-focus: 0 0 0 3px rgba(155,182,255,.25);
 }
}

/* src/styles/base.css */
@import "./md3-tokens.css";
html, body{ height:100%; }
body{
 margin:0;
 font-family: var(--font-sans);
 background: var(--md-surface-2);
 color: var(--md-on-surface);
}
a{ color: var(--md-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }
.container{
 max-width: 1100px;
 margin: 0 auto;
 padding: 16px;
}
.card{
 background: var(--md-surface);
 border: 1px solid var(--md-outline);
 border-radius: var(--radius-2);
 box-shadow: var(--shadow-1);
 padding: 16px;
}
.btn{
 display:inline-flex;
 gap:8px;
 align-items:center;
 justify-content:center;
 border-radius: 999px;
 border: 1px solid var(--md-outline);
 background: var(--md-surface);
 color: var(--md-on-surface);
 padding: 10px 14px;
 font-weight: 600;
 cursor: pointer;
}
.btn:hover{ filter: brightness(0.98); }
.btn:focus{ outline:none; box-shadow: var(--md-focus); }
.btn-primary{
 background: var(--md-primary);
 color: var(--md-on-primary);
 border-color: transparent;
}
.badge{
 display:inline-block;
 padding: 2px 10px;
 border-radius: 999px;
 font-size: 12px;
 border: 1px solid var(--md-outline);
 background: var(--md-surface-2);
}
code, pre{ font-family: var(--font-mono); }