/*
 * Voldabobla – designtokens.
 * Kjelda til sanning for farge, typografi, radius og avstand på alle flatene.
 * Kontrastane er sjekka mot WCAG 2.1 AA (4.5:1 for brødtekst).
 */

:root {
  color-scheme: light dark;

  /* Merkevare: fjordblå base, boble-cyan og ein varm aksent. */
  --vb-brand-900: #072b42;
  --vb-brand-800: #0d3d5c;
  --vb-brand-700: #12507b;
  --vb-brand-600: #17669b;
  --vb-brand-500: #2280c0;
  --vb-brand-100: #d9ecf8;
  --vb-brand-50:  #eef6fc;

  --vb-bubble:    #2fbfdd;
  --vb-accent:    #e2552b;
  --vb-accent-100:#fde8e1;

  --vb-ok:        #1a7f4b;
  --vb-ok-100:    #ddf3e7;
  --vb-warn:      #8a6100;
  --vb-warn-100:  #fbf0d3;
  --vb-error:     #b3261e;
  --vb-error-100: #fbe3e1;

  /* Nøytralar */
  --vb-ink:       #10222f;
  --vb-ink-muted: #4d6172;
  --vb-ink-faint: #6f8496;
  --vb-bg:        #f6f8fa;
  --vb-surface:   #ffffff;
  --vb-surface-2: #eef2f6;
  --vb-line:      #d8e0e8;
  --vb-line-soft: #e8eef3;
  --vb-overlay:   rgba(7, 43, 66, 0.55);

  /* Semantiske alias */
  --vb-focus:     var(--vb-brand-600);
  --vb-link:      var(--vb-brand-700);

  /* Typografi */
  /* Systemfontar som standard – ingen ekstern henting, ingen FOUT. Vil de ha
     ein eigen visuell profil, sjå assets/fonts/README.md. */
  --vb-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vb-font-display: var(--vb-font);
  --vb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --vb-text-xs:  0.75rem;
  --vb-text-sm:  0.875rem;
  --vb-text-base: 1rem;
  --vb-text-lg:  1.125rem;
  --vb-text-xl:  1.375rem;
  --vb-text-2xl: 1.75rem;
  --vb-text-3xl: 2.25rem;

  --vb-leading-tight: 1.2;
  --vb-leading: 1.55;

  /* Avstand (4px-rutenett) */
  --vb-1: 0.25rem;
  --vb-2: 0.5rem;
  --vb-3: 0.75rem;
  --vb-4: 1rem;
  --vb-5: 1.5rem;
  --vb-6: 2rem;
  --vb-7: 3rem;
  --vb-8: 4rem;

  /* Form */
  --vb-radius-sm: 8px;
  --vb-radius: 14px;
  --vb-radius-lg: 22px;
  --vb-radius-pill: 999px;

  --vb-shadow-sm: 0 1px 2px rgba(16, 34, 47, 0.08);
  --vb-shadow: 0 2px 10px rgba(16, 34, 47, 0.09);
  --vb-shadow-lg: 0 12px 32px rgba(16, 34, 47, 0.16);

  --vb-page-max: 68rem;
  --vb-content-max: 44rem;

  --vb-transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);

  /* Kategorifargar – brukt på merkelappar og kalenderprikkar. */
  --vb-cat-fest: #b5307f;
  --vb-cat-kultur: #6b4bbd;
  --vb-cat-idrett: #1a7f4b;
  --vb-cat-fagleg: #12507b;
  --vb-cat-friluft: #2f6b34;
  --vb-cat-mat: #a4562a;
  --vb-cat-anna: #4d6172;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vb-ink:       #e8eff5;
    --vb-ink-muted: #a9bccd;
    --vb-ink-faint: #8ba2b6;
    --vb-bg:        #0a1721;
    --vb-surface:   #0f2231;
    --vb-surface-2: #16303f;
    --vb-line:      #23414f;
    --vb-line-soft: #1b3543;
    --vb-overlay:   rgba(3, 15, 23, 0.7);

    --vb-brand-100: #16374d;
    --vb-brand-50:  #102a3b;
    --vb-link:      #7cc3ef;
    --vb-focus:     #7cc3ef;

    --vb-ok-100:    #103a26;
    --vb-warn-100:  #3a2f10;
    --vb-error-100: #3d1a17;
    --vb-accent-100:#3d1f14;

    --vb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --vb-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    --vb-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.6);
  }
}

[data-theme="dark"] {
  --vb-ink:       #e8eff5;
  --vb-ink-muted: #a9bccd;
  --vb-ink-faint: #8ba2b6;
  --vb-bg:        #0a1721;
  --vb-surface:   #0f2231;
  --vb-surface-2: #16303f;
  --vb-line:      #23414f;
  --vb-line-soft: #1b3543;
  --vb-overlay:   rgba(3, 15, 23, 0.7);
  --vb-brand-100: #16374d;
  --vb-brand-50:  #102a3b;
  --vb-link:      #7cc3ef;
  --vb-focus:     #7cc3ef;
  --vb-ok-100:    #103a26;
  --vb-warn-100:  #3a2f10;
  --vb-error-100: #3d1a17;
  --vb-accent-100:#3d1f14;
}