/* Voxia's four logo colors, softened for the interface. Print and teaching
   artwork keep their original colors; dark companions carry readable text. */
@media screen {
  :root {
    --voxia-blue: #84b9dd;
    --voxia-blue-soft: #e5f1fc;
    --voxia-blue-ink: #306b96;
    --voxia-action: #397baa;
    --voxia-action-hover: #2e648d;
    --voxia-green: #91bd75;
    --voxia-green-soft: #edf7e7;
    --voxia-green-ink: #466b3d;
    --voxia-yellow: #f2d88d;
    --voxia-yellow-soft: #fcf6e5;
    --voxia-coral: #e5828d;
    --voxia-coral-soft: #fbebed;
    --voxia-coral-ink: #9c4555;
    --voxia-ink: #263b49;
    --voxia-muted: #5a6e7a;
    --voxia-line: #dce6ec;
    --voxia-surface: #f8fafc;
    --bg: #fff;
    --ink: var(--voxia-ink);
    --sub: var(--voxia-muted);
    --muted: var(--voxia-muted);
    --line: var(--voxia-line);
    --green: var(--voxia-action);
    --mint: var(--voxia-green-soft);
    --soft: var(--voxia-green-soft);
    --blue: var(--voxia-blue-soft);
    --peach: var(--voxia-yellow-soft);
    --lilac: var(--voxia-coral-soft);
  }
  body, body[data-view=dashboard], body.plans-page, body.institution-page {
    background: var(--voxia-surface);
    color: var(--voxia-ink);
  }
  .site-header, .dashboard-sidebar, .dashboard-content, .login-card { background: #fff; }
  .button-primary, .dashboard-sidebar nav a.sidebar-create {
    background: var(--voxia-action); border-color: var(--voxia-action); color: #fff;
    box-shadow: none;
  }
  .button-primary:hover, .dashboard-sidebar nav a.sidebar-create:hover {
    background: var(--voxia-action-hover); border-color: var(--voxia-action-hover); color: #fff;
  }
  .button-outline:hover, .filter-row button:hover { background: var(--voxia-blue-soft); }
  .filter-row button[aria-pressed=true] { background: var(--voxia-blue-ink); border-color: var(--voxia-blue-ink); color: #fff; }
  :focus-visible, .button:focus-visible, .dashboard-sidebar a:focus-visible,
  .institution-page :focus-visible, .plans-page :focus-visible {
    outline-color: var(--voxia-blue-ink);
  }
  .little-sun, .window-shape::before, .sun-disc:before { background: var(--voxia-yellow); }
  .window-shape, .stage-mint, .pilot-section { background: var(--voxia-green-soft); }
  .floating-note>span { color: var(--voxia-blue-ink); }
  .section-icon.peach { background: var(--voxia-yellow-soft); color: var(--voxia-ink); }
  .pilot-start-band, .start-here, .image-intro { background: var(--voxia-blue-soft); border-color: var(--voxia-line); }
  .pilot-start-band { border-left-color: var(--voxia-blue); }
  .account-access-card { border-left-color: var(--voxia-green); }
  .pilot-note, .section-instructions, .help-note, .help-document-notes { background: var(--voxia-yellow-soft); border-color: var(--voxia-yellow); }
  .feedback-card, .pilot-feedback-area { background: var(--voxia-coral-soft); }
  .shared-navigation a, .plans-page .site-header nav a, .plans-page a:not(.button) { color: var(--voxia-blue-ink); }

  /* The same four families identify the four windows. Yellow stays decorative. */
  .hub-door {
    --door-color: var(--voxia-green-ink); --door-tint: var(--voxia-green-soft);
    --door-accent: var(--voxia-green);
    border-color: var(--voxia-line); border-top-color: var(--door-accent);
  }
  .hub-games { --door-color: var(--voxia-coral-ink); --door-tint: var(--voxia-coral-soft); --door-accent: var(--voxia-coral); }
  .hub-voxia { --door-color: var(--voxia-blue-ink); --door-tint: var(--voxia-blue-soft); --door-accent: var(--voxia-blue); }
  .hub-articles { --door-color: var(--voxia-ink); --door-tint: var(--voxia-yellow-soft); --door-accent: var(--voxia-yellow); }
  .library-note, .library-access-label { background: var(--voxia-blue-soft); color: var(--voxia-blue-ink); }
  .library-note p, .library-topic, .library-card a { color: var(--voxia-blue-ink); }
  .library-filters button[aria-pressed=true] { background: var(--voxia-blue-ink); border-color: var(--voxia-blue-ink); }
  .article-card { border-top: 4px solid var(--voxia-yellow); }
  .article-category, .article-card a { color: var(--voxia-ink); }
  .games-heading .eyebrow, .game-copy .game-category { color: var(--voxia-coral-ink); }
  .games-heading h1, .game-copy h2 { color: var(--voxia-ink); }
  .game-art-words { background: var(--voxia-blue-soft); }
  .game-art-snakes { background: var(--voxia-green-soft); }
  .game-art-ludo { background: var(--voxia-yellow-soft); }
  .game-play { background: var(--voxia-action); }
  .game-play:hover { background: var(--voxia-action-hover); }
  .games-together, .games-entry { background: var(--voxia-coral-soft); border-color: var(--voxia-coral); }
  .games-together-icon { color: var(--voxia-coral-ink); }

  /* Each menu destination has a distinct tint, shared by portal and editor.
     Keep the tint when selected; the border and inset bar identify selection. */
  .dashboard-sidebar nav a,
  #dagur-studio .ds-sidebar .ds-nav a,
  #dagur-studio .ds-sidebar .ds-nav button { --nav-tint: #f3f5f7; --nav-edge: #647687; }
  .dashboard-sidebar nav a[href="#min-forsida"],
  #dagur-studio .ds-sidebar .ds-nav a[href="/#min-forsida"] { --nav-tint: #e8edf2; --nav-edge: #647687; }
  .dashboard-sidebar nav a[href="#myndagluggin"],
  #dagur-studio .ds-sidebar .ds-nav a[href="/#myndagluggin"] { --nav-tint: #dceafa; --nav-edge: #4b7196; }
  .dashboard-sidebar nav a[href="/editor/?view=templates"],
  #dagur-studio .ds-sidebar .ds-nav [data-page=gallery] { --nav-tint: #fcf1cd; --nav-edge: #8d7436; }
  .dashboard-sidebar nav a[href="/editor/?view=examples"],
  #dagur-studio .ds-sidebar .ds-nav [data-page=examples] { --nav-tint: #fae0dd; --nav-edge: #aa625b; }
  .dashboard-sidebar nav a[href="#tilfar"],
  #dagur-studio .ds-sidebar .ds-nav [data-page=saved] { --nav-tint: #ece3fa; --nav-edge: #8061a0; }
  .dashboard-sidebar nav a[href="/editor/?view=images"],
  #dagur-studio .ds-sidebar .ds-nav [data-page=images] { --nav-tint: #e4f2d8; --nav-edge: #5c7d40; }
  .dashboard-sidebar nav a[href="#konta"] { --nav-tint: #daf2ed; --nav-edge: #3b8075; }
  .dashboard-sidebar nav a[href="#hjalp"],
  #dagur-studio .ds-sidebar .ds-nav #ds-guide-open { --nav-tint: #f7dfed; --nav-edge: #9b527e; }
  #dagur-studio .ds-sidebar .ds-nav [data-page=themes] { --nav-tint: #fbe7d2; --nav-edge: #9c7141; }
  .dashboard-sidebar nav a[aria-current=page] {
    background: var(--nav-tint); color: var(--voxia-ink);
    border-color: var(--nav-edge); box-shadow: inset 4px 0 var(--nav-edge);
  }
  #dagur-studio { --ds-green: var(--voxia-action); --ds-soft: var(--voxia-blue-soft); --ds-line: var(--voxia-line); --ds-ink: var(--voxia-ink); --ds-sub: var(--voxia-muted); }
  /* Paper preview stays faithful to the existing printable designs. */
  #dagur-studio .ds-paper { --ds-green: #4b6846; --ds-soft: #eef4e8; --ds-line: #d9e1e4; --ds-ink: #25313d; --ds-sub: #53606d; }
  #dagur-studio .ds-primary, #dagur-studio #ds-save, #dagur-studio .ds-sidebar .ds-nav .ds-new-material {
    background: var(--voxia-action); border-color: var(--voxia-action); color: #fff; box-shadow: none;
  }
  #dagur-studio .ds-primary:hover, #dagur-studio #ds-save:hover, #dagur-studio .ds-sidebar .ds-nav .ds-new-material:hover { background: var(--voxia-action-hover); border-color: var(--voxia-action-hover); }
  #dagur-studio .ds-sidebar .ds-nav button[aria-pressed=true] { background: var(--nav-tint); border-color: var(--nav-edge); color: var(--voxia-ink); box-shadow: inset 4px 0 var(--nav-edge); }
  #dagur-studio .ds-filter button[aria-pressed=true] { background: var(--voxia-blue-ink); border-color: var(--voxia-blue-ink); }
  #dagur-studio .ds-beginner-start { background: var(--voxia-blue-soft); border-left-color: var(--voxia-blue); }
  #dagur-studio .ds-quick-help { background: var(--voxia-yellow-soft); }
  #dagur-studio .ds-example-card, #dagur-studio .ds-gamepack-entry { background: var(--voxia-coral-soft); }
  #dagur-studio .ds-template .ds-thumb, #dagur-studio .ds-library { background: var(--voxia-green-soft); }
  #dagur-studio .ds-button:where(:not(.ds-primary):not(#ds-save)):hover, #dagur-studio .ds-symbol:hover { background: var(--voxia-blue-soft); }

  /* Plans, school/daycare administration and the terms use the same surfaces. */
  .plans-heading .eyebrow, .plan-kicker, .terms-page .eyebrow { color: var(--voxia-green-ink); }
  .plan-card { border-color: var(--voxia-line); border-top-color: var(--voxia-green); }
  .plan-complete { border-top-color: var(--voxia-blue); }
  .plan-complete .plan-kicker { color: var(--voxia-blue-ink); }
  .plans-notice { background: var(--voxia-blue-soft); border-color: var(--voxia-line); color: var(--voxia-blue-ink); }
  .plans-period button[aria-pressed=true], .institution-tabs a[aria-current] { background: var(--voxia-action); color: #fff; }
  .institution-intro em { color: var(--voxia-blue-ink); }
  .institution-plan { border-color: var(--voxia-line); }
  .institution-plan.full { background: var(--voxia-blue-soft); }
  .institution-form, .seat-choice label:has(:checked), .terms-page th { background: var(--voxia-green-soft); }
  .institution-plan:has(:checked), .seat-choice label:has(:checked) { outline-color: var(--voxia-action); }
  .institution-page input[type=radio], .institution-page input[type=checkbox] { accent-color: var(--voxia-action); }
  .institution-card .badge { background: var(--voxia-blue-soft); color: var(--voxia-blue-ink); }
  .admin-note, #institution-status:not([hidden]), #order-result:not(:empty) { background: var(--voxia-yellow-soft); color: var(--voxia-ink); }
  .institution-page .button-outline { color: var(--voxia-action); border-color: var(--voxia-action); }
  .institution-page .danger, #dagur-studio #ds-clear-all { color: var(--voxia-coral-ink); border-color: var(--voxia-coral-ink); }
  .institution-page .danger:hover, #dagur-studio #ds-clear-all:hover { background: var(--voxia-coral-soft); }

  /* Game interface only; answer illustrations and meaningful game colors stay intact. */
  body.voxia-games, body.hearing-game, body.voxia-word-games {
    --green: var(--voxia-green-ink); --blue: var(--voxia-blue-ink); --coral: var(--voxia-coral-ink);
    --line: var(--voxia-line); --muted: var(--voxia-muted); background: var(--voxia-surface);
  }
  :is(.voxia-games, .hearing-game, .voxia-word-games) .primary { background: var(--voxia-action); border-color: var(--voxia-action); color: #fff; }
  :is(.voxia-games, .hearing-game, .voxia-word-games) .primary:hover { background: var(--voxia-action-hover); border-color: var(--voxia-action-hover); }
  .voxia-games .primary:hover { background: var(--voxia-action-hover); }
  .voxia-games .game-art { background: var(--voxia-green-soft); }
  .voxia-games .game-art.rhyme, .voxia-games .task-symbol { background: var(--voxia-yellow-soft); color: var(--voxia-ink); }
  .voxia-games .game-art.bus, .voxia-games .bus-status { background: var(--voxia-blue-soft); }
  .voxia-games .trial-badge { background: var(--voxia-yellow-soft); color: var(--voxia-ink); }
  .voxia-games .secondary:hover, .voxia-games .tool:hover { background: var(--voxia-coral-soft); }

  /* Public introduction and samples use the same four logo tints. */
  .public-home {
    --home-blue: var(--voxia-blue-soft); --home-green: var(--voxia-green-soft);
    --home-yellow: var(--voxia-yellow-soft); --home-coral: var(--voxia-coral-soft);
    --home-text: var(--voxia-ink); --home-muted: var(--voxia-muted);
  }
  .public-home .pane-blue { --accent: var(--voxia-blue-ink); }
  .public-home .pane-green { --accent: var(--voxia-green-ink); }
  .public-home .pane-coral { --accent: var(--voxia-coral-ink); }
  .public-home .pane-yellow { --accent: var(--voxia-ink); }
  .sample-blue { --sample-tone: var(--voxia-blue-soft); --sample-edge: var(--voxia-blue-ink); }
  .sample-green { --sample-tone: var(--voxia-green-soft); --sample-edge: var(--voxia-green-ink); }
  .sample-yellow { --sample-tone: var(--voxia-yellow-soft); --sample-edge: var(--voxia-ink); }
  .sample-coral { --sample-tone: var(--voxia-coral-soft); --sample-edge: var(--voxia-coral-ink); }
  .samples-free { background: var(--voxia-green-soft); color: var(--voxia-green-ink); }

  /* The workbench remains light around the white sheet. High-specificity legacy
     toolbar styles are intentionally covered here, with no layout changes. */
  body.ds-workbench-active { background: var(--voxia-surface); }
  #dagur-studio #ds-workbench { background: #fff; border-color: var(--voxia-line); }
  #dagur-studio .ds-workbench-tabs, #dagur-studio #ds-workbench-mobile-tabs { background: var(--voxia-blue-soft); border-color: var(--voxia-line); }
  #dagur-studio .ds-workbench-tabs button[aria-pressed=true],
  #dagur-studio #ds-workbench-mobile-tabs button[aria-pressed=true] { background: #fff; border-color: var(--voxia-blue); color: var(--voxia-blue-ink); box-shadow: none; }
  #dagur-studio #ds-editor-page .ds-stage { background: var(--voxia-surface); }
  #dagur-studio #ds-workbench-toolbar #ds-download,
  #dagur-studio #ds-workbench-exit-preview { background: var(--voxia-action); border-color: var(--voxia-action); color: #fff; }
  #dagur-studio #ds-workbench-toolbar #ds-download:hover,
  #dagur-studio #ds-workbench-exit-preview:hover { background: var(--voxia-action-hover); border-color: var(--voxia-action-hover); }
  #dagur-studio #ds-workbench-toolbar #ds-save { background: var(--voxia-green-soft); border-color: #7d9b6d; color: var(--voxia-green-ink); }
  #dagur-studio #ds-workbench-toolbar #ds-save:hover { background: #e1efd8; border-color: var(--voxia-green-ink); }
  #dagur-studio .ds-workbench-instruction, #dagur-studio .ds-workbench-viewbar,
  #dagur-studio .ds-workbench-print-note { color: var(--voxia-muted); }
  #dagur-studio .ds-text-size-setting { background: var(--voxia-blue-soft); border-color: var(--voxia-line); }

  /* Session messages match the interface without changing the access lock. */
  #gluggin-session-dialog { color: var(--voxia-ink); border-color: var(--voxia-line); }
  #gluggin-session-dialog::backdrop { background: var(--voxia-surface); }
  #gluggin-session-dialog h2 { color: var(--voxia-ink); }
  #gluggin-session-dialog p, #gluggin-session-dialog small, #gluggin-session-status { color: var(--voxia-muted); }
  #gluggin-session-dialog button { background: var(--voxia-action); }
  #gluggin-session-dialog button:hover { background: var(--voxia-action-hover); }
  #gluggin-session-dialog a { color: var(--voxia-blue-ink); }
  #gluggin-session-dialog :focus-visible { outline-color: var(--voxia-blue-ink); }

  /* Avenir Next's demi weight keeps a clear hierarchy without the heavy bold
     face. This is interface typography only; sheet headings and game letters
     retain their teaching styles and PDF output is unaffected. */
  body :is(h1, h2, h3, h4, h5, h6):where(:not(#ds-paper *)),
  #dagur-studio :is(h1, h2, h3, h4, h5, h6):where(:not(#ds-paper *)),
  #gluggin-session-dialog h2 { font-weight: 600; }
  .home-pane > strong, .example-copy > strong,
  .hub-door .hub-action, .hub-open,
  .library-card a, .article-card a, .library-info > summary,
  .library-card .library-format, .library-topic, .article-category,
  .game-copy .game-category, .games-heading .eyebrow,
  .plans-heading .eyebrow, .plan-kicker, .plan-tag,
  .dashboard-sidebar .menu-label { font-weight: 600; }
  .dashboard-sidebar nav a[aria-current=page],
  .dashboard-sidebar nav a.sidebar-create,
  .button, .game-play, .plans-period button,
  .plans-questions summary, .plan-select,
  :is(.voxia-games, .hearing-game, .voxia-word-games) :is(.primary, .secondary, .tool),
  #dagur-studio .ds-sidebar .ds-nav button[aria-pressed=true],
  #dagur-studio .ds-sidebar .ds-nav .ds-new-material,
  #dagur-studio .ds-button { font-weight: 600; }
}