/*
  Design tokens for the "Зошит + Дошка" (Notebook + Chalkboard) design system.
  Source of truth: the approved design canvas mockup
  (https://claude.ai/code/artifact/1989356d-db40-4f5a-8a01-9f0e7afc436f) and
  specs/001-foundation-design-system/research.md.

  Theme resolution: bare :root holds the light "Зошит" values (the default);
  a system dark preference overrides them unless the viewer picked "light"
  explicitly; [data-theme="dark"] wins outright once the user (or the
  pre-boot script in index.html) sets it. See Services/ThemeService.cs.
*/

/* ---------- Bundled fonts (no fonts.googleapis.com at runtime — FR-007a) ---------- */

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/caveat-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/caveat-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/caveat-700-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: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-400-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: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-600-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: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-700-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: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito-800-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito-800-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito-800-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 stacks (generic fallback if a bundled file fails — spec Edge Case) ---------- */

:root {
  --skb-font-heading: 'Caveat', cursive;
  --skb-font-body: 'Nunito', sans-serif;
}

/* ---------- Light theme "Зошит" (default) ---------- */

:root {
  --skb-bg: #FBF8F1;
  --skb-grid-line: #DCE6F2;
  --skb-card-bg: #FFFFFF;
  --skb-card-border: transparent;
  --skb-card-border-style: solid;
  --skb-card-shadow: 0 1px 2px rgba(31, 58, 147, 0.10), 0 6px 14px rgba(31, 58, 147, 0.06);
  --skb-margin-accent: #E5484D;
  --skb-divider: #DCE6F2;
  --skb-text-primary: #1F3A93;
  --skb-text-secondary: #5B6270;
  --skb-accent-confirmed: #2F7A52;
  --skb-accent-attention-text: #B23228;
  --skb-accent-attention-fill: #E5484D;
  --skb-accent-primary: #1F3A93;
  --skb-nav-bg: #FFFFFF;
  --skb-nav-border: #DCE6F2;
  --skb-nav-border-style: solid;
}

/* ---------- Dark theme "Дошка" — follows system preference by default ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --skb-bg: #1F3B2D;
    --skb-grid-line: transparent;
    --skb-card-bg: rgba(255, 255, 255, 0.03);
    --skb-card-border: rgba(242, 241, 234, 0.35);
    --skb-card-border-style: dashed;
    --skb-card-shadow: none;
    --skb-margin-accent: transparent;
    --skb-divider: rgba(242, 241, 234, 0.18);
    --skb-text-primary: #F2F1EA;
    --skb-text-secondary: #B9C4BB;
    --skb-accent-confirmed: #9AD1F0;
    --skb-accent-attention-text: #F4A6B7;
    --skb-accent-attention-fill: #F4A6B7;
    --skb-accent-primary: #F5D76E;
    --skb-nav-bg: #1B3527;
    --skb-nav-border: rgba(242, 241, 234, 0.25);
    --skb-nav-border-style: dashed;
  }
}

/* ---------- Dark theme — explicit manual override (wins over system preference) ---------- */

:root[data-theme="dark"] {
  --skb-bg: #1F3B2D;
  --skb-grid-line: transparent;
  --skb-card-bg: rgba(255, 255, 255, 0.03);
  --skb-card-border: rgba(242, 241, 234, 0.35);
  --skb-card-border-style: dashed;
  --skb-card-shadow: none;
  --skb-margin-accent: transparent;
  --skb-divider: rgba(242, 241, 234, 0.18);
  --skb-text-primary: #F2F1EA;
  --skb-text-secondary: #B9C4BB;
  --skb-accent-confirmed: #9AD1F0;
  --skb-accent-attention-text: #F4A6B7;
  --skb-accent-attention-fill: #F4A6B7;
  --skb-accent-primary: #F5D76E;
  --skb-nav-bg: #1B3527;
  --skb-nav-border: rgba(242, 241, 234, 0.25);
  --skb-nav-border-style: dashed;
}

/* ---------- Shared surfaces ---------- */

body {
  background-color: var(--skb-bg);
  background-image:
    linear-gradient(var(--skb-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--skb-grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--skb-text-primary);
  font-family: var(--skb-font-body);
  margin: 0;
}