/* Material-tema — samme farger som klassisk, pluss typografi og former
   fra Material 3 nederst. Layouten ligger i layout.css.

   Gaula design tokens — river/riverbank palette, warm neutral ground.
   Swap values here to retheme the whole app. Dark overrides mirror
   light one-for-one; data-theme overrides exist for a future manual
   light/dark toggle even though nothing sets that attribute yet. */

:root {
  --bg: #f4eede;
  --bg-elevated: #faf6ec;
  --bg-elevated-2: #eee5d2;
  --ink: #16302c;
  --ink-muted: #4f6a63;
  --ink-faint: #7c9089;
  --line: rgba(22, 48, 44, 0.13);
  --line-strong: rgba(22, 48, 44, 0.22);

  --accent: #1f7a76;
  --accent-2: #3d6f8f;
  --accent-ink: #0f4f4c;
  --accent-soft: rgba(31, 122, 118, 0.14);

  --moss: #5f8a3f;
  --moss-soft: rgba(95, 138, 63, 0.16);
  --amber: #b5791f;
  --amber-soft: rgba(181, 121, 31, 0.16);
  --clay: #a24a34;
  --clay-soft: rgba(162, 74, 52, 0.14);

  --shadow: 0 1px 2px rgba(22, 48, 44, 0.06), 0 12px 28px -16px rgba(22, 48, 44, 0.22);
  --radius-lg: 22px;
  --radius-md: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f2326;
    --bg-elevated: #15302f;
    --bg-elevated-2: #1c3a38;
    --ink: #eef2ee;
    --ink-muted: #a9c0ba;
    --ink-faint: #7f9994;
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.18);

    --accent: #5fc9bd;
    --accent-2: #86b8d1;
    --accent-ink: #bdf0e6;
    --accent-soft: rgba(95, 201, 189, 0.16);

    --moss: #8bbf5e;
    --moss-soft: rgba(139, 191, 94, 0.16);
    --amber: #e0a83f;
    --amber-soft: rgba(224, 168, 63, 0.16);
    --clay: #d97a5c;
    --clay-soft: rgba(217, 122, 92, 0.16);

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 40px -20px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --bg: #0f2326;
  --bg-elevated: #15302f;
  --bg-elevated-2: #1c3a38;
  --ink: #eef2ee;
  --ink-muted: #a9c0ba;
  --ink-faint: #7f9994;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);

  --accent: #5fc9bd;
  --accent-2: #86b8d1;
  --accent-ink: #bdf0e6;
  --accent-soft: rgba(95, 201, 189, 0.16);

  --moss: #8bbf5e;
  --moss-soft: rgba(139, 191, 94, 0.16);
  --amber: #e0a83f;
  --amber-soft: rgba(224, 168, 63, 0.16);
  --clay: #d97a5c;
  --clay-soft: rgba(217, 122, 92, 0.16);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 40px -20px rgba(0, 0, 0, 0.55);
}

:root[data-theme="light"] {
  --bg: #f4eede;
  --bg-elevated: #faf6ec;
  --bg-elevated-2: #eee5d2;
  --ink: #16302c;
  --ink-muted: #4f6a63;
  --ink-faint: #7c9089;
  --line: rgba(22, 48, 44, 0.13);
  --line-strong: rgba(22, 48, 44, 0.22);

  --accent: #1f7a76;
  --accent-2: #3d6f8f;
  --accent-ink: #0f4f4c;
  --accent-soft: rgba(31, 122, 118, 0.14);

  --moss: #5f8a3f;
  --moss-soft: rgba(95, 138, 63, 0.16);
  --amber: #b5791f;
  --amber-soft: rgba(181, 121, 31, 0.16);
  --clay: #a24a34;
  --clay-soft: rgba(162, 74, 52, 0.14);

  --shadow: 0 1px 2px rgba(22, 48, 44, 0.06), 0 12px 28px -16px rgba(22, 48, 44, 0.22);
}

/* Områdefarger: «Mitt fiske» og kortene på valgsiden. */
/* «Mitt fiske» får en varm, dempet bronsetone i stedet for elvegrønt, så
   det er tydelig hvilket område man er i. Samme variabelnavn som temaet,
   bare satt på <body>, så alt under arver dem. */
body.area-fiske {
  --accent: #7d6440;
  --accent-ink: #5b4527;
  --accent-soft: rgba(125, 100, 64, 0.15);
  --bg: #f3ede2;
  --bg-elevated: #faf6ee;
  --bg-elevated-2: #ebe2d2;
}
:root[data-theme="dark"] body.area-fiske {
  --accent: #d2b48a;
  --accent-ink: #e6cfae;
  --accent-soft: rgba(210, 180, 138, 0.16);
  --bg: #1b1814;
  --bg-elevated: #24201b;
  --bg-elevated-2: #2e2922;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.area-fiske {
    --accent: #d2b48a;
    --accent-ink: #e6cfae;
    --accent-soft: rgba(210, 180, 138, 0.16);
    --bg: #1b1814;
    --bg-elevated: #24201b;
    --bg-elevated-2: #2e2922;
  }
}

.choosecard--fiske {
  --card-bg: rgba(125, 100, 64, 0.14);
  --card-accent: #7d6440;
}
.choosecard--river {
  --card-bg: var(--accent-soft);
  --card-accent: var(--accent);
}
:root[data-theme="dark"] .choosecard--fiske {
  --card-bg: rgba(210, 180, 138, 0.14);
  --card-accent: #d2b48a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .choosecard--fiske {
    --card-bg: rgba(210, 180, 138, 0.14);
    --card-accent: #d2b48a;
  }
}

/* Material 3: typografi og former. */
:root {
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 12px;
}