:root {
  color-scheme: light;
  --paper: #f2f0e8;
  --paper-strong: #f8f6f0;
  --paper-deep: #e3dfd2;
  --panel: rgba(248, 246, 240, 0.9);
  --panel-strong: #fcfbf7;
  --panel-accent: rgba(63, 182, 139, 0.05);
  --ink: #121416;
  --ink-soft: #2a2f32;
  --ink-on-solid: #fff;
  --muted: #66706d;
  --muted-strong: #4f5855;
  --rule: #c5c7c0;
  --rule-strong: #8b8f88;
  --accent: #3fb68b;
  --accent-deep: #0f684c;
  --accent-blue: #2d5fb4;
  --accent-plum: #7551b3;
  --grammar-accent-green: #15795f;
  --grammar-accent-blue: #2d5fb4;
  --grammar-accent-plum: #8750a8;
  --grammar-accent-rust: #a0523d;
  --grammar-accent-amber: #946815;
  --grammar-accent-slate: #5e707c;
  --stamp: #a34f3b;
  --danger: #b33c31;
  --warning: #a56a0e;
  --success: #20745a;
  --rust-accent: #a0523d;
  --rust-accent-soft: #d08770;
  --streak-accent: #e67e22;
  --dark-page-gradient-start: #060907;
  --dark-page-gradient-mid: #080b09;
  --dark-page-gradient-end: #050806;
  --recollection-poor: #b42318;
  --recollection-fair: #d97706;
  --recollection-normal: #ca8a04;
  --recollection-strong: #15803d;
  --recollection-very-strong: #0f766e;
  --review-rating-hard: #b2761a;
  --session-complete-accent: #c58a17;
  --session-complete-accent-rgb: 197, 138, 23;
  --shadow-color: rgba(23, 28, 26, 0.08);
  --shadow-color-strong: rgba(23, 28, 26, 0.18);
  --surface-shadow:
    0 18px 48px rgba(23, 28, 26, 0.05),
    0 6px 18px rgba(23, 28, 26, 0.06);
  --surface-shadow-strong:
    0 26px 70px rgba(23, 28, 26, 0.11),
    0 10px 24px rgba(23, 28, 26, 0.12);
  --hiisi-accent-rgb: 63, 182, 139;
  --hiisi-accent-50: #f0fbf6;
  --hiisi-accent-100: #d8f5e9;
  --hiisi-accent-200: #afe9d1;
  --hiisi-accent-300: #7fd6b2;
  --hiisi-accent-400: #56c497;
  --hiisi-accent-500: #3fb68b;
  --hiisi-accent-600: #2d9872;
  --hiisi-accent-700: #21785a;
  --hiisi-accent-800: #1d5f48;
  --hiisi-accent-900: #174938;
  --hiisi-accent-950: #0d271f;
  --pico-background-color: transparent;
  --pico-color: var(--ink);
  --pico-muted-color: var(--muted);
  --pico-muted-border-color: var(--rule);
  --pico-primary: var(--accent-deep);
  --pico-primary-background: var(--accent);
  --pico-primary-border: var(--accent-deep);
  --pico-primary-hover: #0b573f;
  --pico-primary-hover-background: #31a77d;
  --pico-primary-hover-border: #0b573f;
  --pico-primary-focus: rgba(63, 182, 139, 0.24);
  --pico-primary-inverse: #08110d;
  --pico-secondary: var(--muted-strong);
  --pico-secondary-background: var(--paper-deep);
  --pico-secondary-border: var(--rule-strong);
  --pico-secondary-hover: var(--ink);
  --pico-secondary-hover-background: #d9d4c4;
  --pico-secondary-hover-border: var(--ink);
  --pico-secondary-focus: rgba(27, 31, 34, 0.14);
  --pico-contrast: var(--ink);
  --pico-contrast-background: var(--ink);
  --pico-contrast-border: var(--ink);
  --pico-contrast-hover: #000;
  --pico-contrast-hover-background: #25282b;
  --pico-contrast-hover-border: #000;
  --pico-contrast-focus: rgba(18, 20, 22, 0.2);
  --pico-contrast-inverse: var(--paper);
  --pico-h1-color: var(--ink);
  --pico-h2-color: var(--ink);
  --pico-h3-color: var(--ink);
  --pico-h4-color: var(--ink-soft);
  --pico-h5-color: var(--ink-soft);
  --pico-h6-color: var(--muted);
  --pico-card-background-color: var(--panel);
  --pico-card-border-color: var(--rule);
  --pico-card-box-shadow: var(--surface-shadow);
  --pico-card-sectioning-background-color: rgba(18, 20, 22, 0.02);
  --pico-dropdown-background-color: var(--panel-strong);
  --pico-dropdown-border-color: var(--rule);
  --pico-dropdown-box-shadow: var(--surface-shadow-strong);
  --pico-dropdown-color: var(--ink);
  --pico-dropdown-hover-background-color: rgba(63, 182, 139, 0.08);
  --pico-form-element-background-color: rgba(252, 251, 247, 0.9);
  --pico-form-element-border-color: var(--rule-strong);
  --pico-form-element-color: var(--ink);
  --pico-form-element-placeholder-color: color-mix(in srgb, var(--muted) 72%, white 28%);
  --pico-form-element-active-background-color: #fffdf9;
  --pico-form-element-active-border-color: var(--accent-deep);
  --pico-form-element-focus-color: rgba(63, 182, 139, 0.14);
  --pico-form-element-invalid-border-color: var(--danger);
  --pico-form-element-invalid-active-border-color: var(--danger);
  --pico-form-element-invalid-focus-color: rgba(179, 60, 49, 0.16);
  --pico-form-element-valid-border-color: var(--success);
  --pico-form-element-valid-active-border-color: var(--success);
  --pico-form-element-valid-focus-color: rgba(32, 116, 90, 0.16);
  --pico-switch-background-color: #cfd4cb;
  --pico-switch-checked-background-color: var(--accent);
  --pico-range-active-border-color: var(--accent);
  --pico-range-thumb-border-color: var(--accent-deep);
  --pico-range-thumb-color: var(--accent);
  --pico-progress-background-color: #dfe3da;
  --pico-progress-color: var(--accent);
  --pico-accordion-border-color: var(--rule);
  --pico-accordion-active-summary-color: var(--ink);
  --pico-accordion-open-summary-color: var(--muted);
  --pico-table-border-color: var(--rule);
  --pico-table-row-stripped-background-color: rgba(18, 20, 22, 0.025);
  --pico-modal-overlay-background-color: rgba(18, 20, 22, 0.34);
  --pico-box-shadow: var(--surface-shadow);
  --pico-text-selection-color: rgba(63, 182, 139, 0.16);
  --sl-color-primary-50: var(--hiisi-accent-50);
  --sl-color-primary-100: var(--hiisi-accent-100);
  --sl-color-primary-200: var(--hiisi-accent-200);
  --sl-color-primary-300: var(--hiisi-accent-300);
  --sl-color-primary-400: var(--hiisi-accent-400);
  --sl-color-primary-500: var(--hiisi-accent-500);
  --sl-color-primary-600: var(--hiisi-accent-600);
  --sl-color-primary-700: var(--hiisi-accent-700);
  --sl-color-primary-800: var(--hiisi-accent-800);
  --sl-color-primary-900: var(--hiisi-accent-900);
  --sl-color-primary-950: var(--hiisi-accent-950);
  --sl-color-danger-50: #fcf2f0;
  --sl-color-danger-100: #f7d8d4;
  --sl-color-danger-200: #efb2aa;
  --sl-color-danger-300: #e18579;
  --sl-color-danger-400: #c95c4f;
  --sl-color-danger-500: var(--danger);
  --sl-color-danger-600: #963126;
  --sl-color-danger-700: #76261e;
  --sl-color-danger-800: #5d211b;
  --sl-color-danger-900: #431917;
  --sl-color-danger-950: #24100d;
  --sl-color-warning-50: #fff7e8;
  --sl-color-warning-100: #fde9bf;
  --sl-color-warning-200: #f8d17e;
  --sl-color-warning-300: #ecad3e;
  --sl-color-warning-400: #cf871d;
  --sl-color-warning-500: var(--warning);
  --sl-color-warning-600: #8c5509;
  --sl-color-warning-700: #6f4108;
  --sl-color-warning-800: #59340a;
  --sl-color-warning-900: #3f2608;
  --sl-color-warning-950: #221305;
  --sl-color-neutral-0: var(--panel-strong);
  --sl-color-neutral-50: var(--paper-strong);
  --sl-color-neutral-100: #f0ede3;
  --sl-color-neutral-200: #ddd9cb;
  --sl-color-neutral-300: #c6c2b3;
  --sl-color-neutral-400: #9f9c8f;
  --sl-color-neutral-500: #7c7a70;
  --sl-color-neutral-600: #66645c;
  --sl-color-neutral-700: #504f49;
  --sl-color-neutral-800: #313331;
  --sl-color-neutral-900: #1c1f22;
  --sl-color-neutral-950: #101214;
  --sl-input-border-color-focus: var(--accent-deep);
  --sl-focus-ring-color: rgba(63, 182, 139, 0.3);
  --sl-shadow-small: var(--surface-shadow);
  --sl-shadow-medium: var(--surface-shadow);
  --sl-shadow-large: var(--surface-shadow-strong);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121517;
  --paper-strong: #171b1d;
  --paper-deep: #0d1012;
  --panel: rgba(24, 29, 31, 0.88);
  --panel-strong: #1b2022;
  --panel-accent: rgba(63, 182, 139, 0.08);
  --ink: #ece8dd;
  --ink-soft: #ddd7cc;
  --muted: #a39d93;
  --muted-strong: #c1b9ad;
  --rule: #333a3d;
  --rule-strong: #50595d;
  --accent: #56c79a;
  --accent-deep: #9ce4c4;
  --accent-blue: #84aeea;
  --accent-plum: #c7b0ef;
  --grammar-accent-green: #82d9b7;
  --grammar-accent-blue: #9fbdff;
  --grammar-accent-plum: #d7b6f4;
  --grammar-accent-rust: #efa084;
  --grammar-accent-amber: #f3d267;
  --grammar-accent-slate: #bac7d2;
  --stamp: #d88467;
  --danger: #f18a7f;
  --warning: #f2c36f;
  --success: #7ad8b1;
  --shadow-color: rgba(0, 0, 0, 0.32);
  --shadow-color-strong: rgba(0, 0, 0, 0.45);
  --surface-shadow:
    0 18px 48px rgba(0, 0, 0, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.28);
  --surface-shadow-strong:
    0 26px 70px rgba(0, 0, 0, 0.34),
    0 10px 24px rgba(0, 0, 0, 0.36);
  --pico-background-color: transparent;
  --pico-color: var(--ink);
  --pico-muted-color: var(--muted);
  --pico-muted-border-color: var(--rule);
  --pico-primary: var(--accent-deep);
  --pico-primary-background: var(--accent);
  --pico-primary-border: var(--accent-deep);
  --pico-primary-hover: #d8f6e8;
  --pico-primary-hover-background: #4db88f;
  --pico-primary-hover-border: #d8f6e8;
  --pico-primary-focus: rgba(86, 199, 154, 0.22);
  --pico-primary-inverse: #06100b;
  --pico-secondary: var(--ink-soft);
  --pico-secondary-background: #22292b;
  --pico-secondary-border: #586165;
  --pico-secondary-hover: #fff9ef;
  --pico-secondary-hover-background: #2d3437;
  --pico-secondary-hover-border: #fff9ef;
  --pico-secondary-focus: rgba(236, 232, 221, 0.16);
  --pico-contrast: #fffdf7;
  --pico-contrast-background: #fffdf7;
  --pico-contrast-border: #fffdf7;
  --pico-contrast-hover: #fff;
  --pico-contrast-hover-background: #ffffff;
  --pico-contrast-hover-border: #fff;
  --pico-contrast-focus: rgba(255, 255, 255, 0.2);
  --pico-contrast-inverse: #0e1113;
  --pico-card-background-color: var(--panel);
  --pico-card-border-color: var(--rule);
  --pico-card-sectioning-background-color: rgba(255, 255, 255, 0.02);
  --pico-dropdown-background-color: var(--panel-strong);
  --pico-dropdown-border-color: var(--rule);
  --pico-dropdown-color: var(--ink);
  --pico-dropdown-hover-background-color: rgba(86, 199, 154, 0.12);
  --pico-form-element-background-color: rgba(17, 21, 23, 0.88);
  --pico-form-element-border-color: var(--rule-strong);
  --pico-form-element-color: var(--ink);
  --pico-form-element-placeholder-color: color-mix(in srgb, var(--muted) 76%, black 24%);
  --pico-form-element-active-background-color: rgba(20, 24, 26, 0.96);
  --pico-form-element-active-border-color: var(--accent-deep);
  --pico-form-element-focus-color: rgba(86, 199, 154, 0.12);
  --pico-progress-background-color: #273033;
  --sl-color-danger-50: #2d1210;
  --sl-color-danger-100: #451a17;
  --sl-color-danger-200: #652821;
  --sl-color-danger-300: #8b382e;
  --sl-color-danger-400: #c86156;
  --sl-color-danger-500: var(--danger);
  --sl-color-danger-600: #f4a39a;
  --sl-color-danger-700: #f7bcb5;
  --sl-color-danger-800: #fad3ce;
  --sl-color-danger-900: #fde8e5;
  --sl-color-danger-950: #fff4f2;
  --sl-color-warning-50: #241604;
  --sl-color-warning-100: #3a2408;
  --sl-color-warning-200: #56370d;
  --sl-color-warning-300: #805716;
  --sl-color-warning-400: #b9862f;
  --sl-color-warning-500: var(--warning);
  --sl-color-warning-600: #f5d28d;
  --sl-color-warning-700: #f8ddb0;
  --sl-color-warning-800: #fae8c8;
  --sl-color-warning-900: #fdf3e2;
  --sl-color-warning-950: #fff9f0;
  --sl-color-neutral-0: var(--panel-strong);
  --sl-color-neutral-50: #1e2426;
  --sl-color-neutral-100: #23292b;
  --sl-color-neutral-200: #2d3436;
  --sl-color-neutral-300: #434c50;
  --sl-color-neutral-400: #6e777c;
  --sl-color-neutral-500: #91979b;
  --sl-color-neutral-600: #b8b5af;
  --sl-color-neutral-700: #d2cdc2;
  --sl-color-neutral-800: #ebe7dc;
  --sl-color-neutral-900: #f5f1e8;
  --sl-color-neutral-950: #fffcf5;
}