/* North English · tokens de marca. Valores herdados da North V2, mais as superfícies do app (page, block, panel) e as cores dos botões de avaliação (grade-*). */
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 400; font-display: swap; src: url("fontes/Epilogue-400.woff2") format("woff2"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 500; font-display: swap; src: url("fontes/Epilogue-500.woff2") format("woff2"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 600; font-display: swap; src: url("fontes/Epilogue-600.woff2") format("woff2"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 700; font-display: swap; src: url("fontes/Epilogue-700.woff2") format("woff2"); }

:root {
  --paper: #FFFFFF;
  --mist: #F3F5F8;
  --sky: #EAF1FD;
  --line: #DDE2E9;
  --steel: #7D8694;
  --slate: #59636F;
  --ink: #0E1116;
  --blue: #1F5FD6;
  --on-blue: #FFFFFF;
  --azure: #7FA8FF;
  --navy: #0D2B66;
  --on-navy: #FFFFFF;
  --page: #F3F5F8;
  --block: #FFFFFF;
  --panel: #F3F5F8;
  --grade-again: #C23B32;
  --grade-hard: #A15C07;
  --grade-good: #2E7D4F;
  --gradient-deep: linear-gradient(160deg, #1F5FD6, #0D2B66);
  --gradient-light: linear-gradient(160deg, #7FA8FF, #1F5FD6);
  --shadow-block: 0 1px 2px rgba(13, 43, 102, .06), 0 8px 24px rgba(13, 43, 102, .08), inset 0 1px 0 rgba(255, 255, 255, .7);
  --font-sans: "Epilogue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E1116;
    --mist: #161A21;
    --sky: #15233D;
    --line: #2A303A;
    --steel: #6B7482;
    --slate: #A1AAB7;
    --ink: #EEF1F5;
    --blue: #7FA8FF;
    --on-blue: #0E1116;
    --navy: #24479A;
    --on-navy: #FFFFFF;
    --page: #0E1116;
    --block: #161A21;
    --panel: #1E232C;
    --grade-again: #F28B82;
    --grade-hard: #E8B04B;
    --grade-good: #6CC28E;
    --shadow-block: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E1116;
  --mist: #161A21;
  --sky: #15233D;
  --line: #2A303A;
  --steel: #6B7482;
  --slate: #A1AAB7;
  --ink: #EEF1F5;
  --blue: #7FA8FF;
  --on-blue: #0E1116;
  --navy: #24479A;
  --on-navy: #FFFFFF;
  --page: #0E1116;
  --block: #161A21;
  --panel: #1E232C;
  --grade-again: #F28B82;
  --grade-hard: #E8B04B;
  --grade-good: #6CC28E;
  --shadow-block: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
  color-scheme: dark;
}

body { background: var(--page); color: var(--ink); font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-sans); font-size: 54px; line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; }
.heading-1 { font-family: var(--font-sans); font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.heading-2 { font-family: var(--font-sans); font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.heading-3 { font-family: var(--font-sans); font-size: 18px; line-height: 1.35; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.study { font-family: var(--font-sans); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.phonetic { font-family: var(--font-sans); font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--slate); }