/* =========================================================================
   Pizzabakeren layer on the shared Ligo foundation.

   Load order: colors_and_type.css (Ligo fonts, scale and tokens, copied
   unchanged from manedsrapportering), theme.css (the six training-health
   themes, copied unchanged from ligo-regnskap-automatisering), ligo-shell.css
   (copied unchanged from manedsrapportering), then this file.

   This file owns only what is Pizzabakeren: the two brand themes, the chart
   series every theme uses, the bridge tokens the six themes do not carry and
   the theme picker. The brand values come from alderssjekk-vipps
   (public/css/app.css): burgundy #7b211b, yellow #f8ad1b, cream #fff7d7.
   Shapes, type and spacing stay Ligo. No gradients, glows or panel shadows.
   ========================================================================= */

/* ---------- Bridge for every theme ---------- */
/* The training-health themes leave out a few tokens the Ligo shell reads.
   Derive them from the active theme so no sage or teal leaks through. */
html[data-page-style="minimalistic"] {
  --field-bg:     var(--bg-cream);
  --logo-surface: transparent;
  --on-primary:   var(--bg-cream);
  --primary-pale: var(--primary-bright);
  --accent-hover: var(--accent);

  /* Chart series, validated with the dataviz validator against every light
     surface (#fff7d7, #fff7ed, #f0f5ec, #fcf2f5, #ffffff). Brand burgundy and
     a darkened brand yellow lead. Keep the order: colour follows the entity. */
  --viz-1: #9b2d22;
  --viz-2: #c27c00;
  --viz-3: #0b7f9f;
  --viz-4: #4f8a1e;
  --viz-5: #6d4ca3;
  --viz-6: #00876c;
  --viz-7: #2f63c9;
  --viz-8: #c4407c;
  --viz-compare: color-mix(in srgb, var(--muted) 70%, var(--bg-cream));

  /* Magnitude ramp in the brand burgundy, light to dark. */
  --viz-seq-1: #f6e3d6;
  --viz-seq-2: #ecc4ae;
  --viz-seq-3: #de9f86;
  --viz-seq-4: #cc7a62;
  --viz-seq-5: #b45642;
  --viz-seq-6: #9b2d22;
  --viz-seq-7: #6e1c15;
}

/* Same entities, own steps for the dark surfaces (#1b100d, #111111, #191919). */
html.dark[data-page-style="minimalistic"] {
  --viz-1: #d0485a;
  --viz-2: #bb8a00;
  --viz-3: #2596ad;
  --viz-4: #56a02f;
  --viz-5: #8a75dc;
  --viz-6: #1fa386;
  --viz-7: #4c7ddd;
  --viz-8: #c2508a;

  --viz-seq-1: #3a1a15;
  --viz-seq-2: #5a241d;
  --viz-seq-3: #7a3027;
  --viz-seq-4: #9c3d31;
  --viz-seq-5: #bd5243;
  --viz-seq-6: #d9776a;
  --viz-seq-7: #efaaa0;
}

/* ---------- Pizzabakeren (default) ---------- */

html[data-page-style="minimalistic"][data-theme="pizzabakeren"] {
  color-scheme: light;

  --bg:            #fff7d7;
  --bg-cream:      #fff7d7;
  --bg-cream-2:    #fff0c2;
  --surface:       #fff7d7;
  --card:          #fff7d7;
  --paper:         #fff7d7;
  --side-bg:       #fff7d7;
  --page-backdrop: #fff7d7;

  --border:        color-mix(in srgb, var(--ink) 18%, var(--bg-cream));
  --border-strong: color-mix(in srgb, var(--ink) 28%, var(--bg-cream));

  --ink:           #4d1712;
  --ink-2:         #2e0d0a;
  --muted:         #7c4b2e;
  --muted-2:       #8a5634;

  --primary:         #7b211b;
  --primary-hover:   #5f1715;
  --primary-bright:  #a8382b;
  --primary-pale:    #f2d3c4;
  --primary-soft:    color-mix(in srgb, var(--primary) 8%, var(--bg-cream));
  --primary-ink:     #762018;
  --primary-rgb:     123, 33, 27;
  --on-primary:      #fff7d7;
  --card-hover:      var(--primary-soft);
  --theme-logo:      var(--primary);

  --accent:          #f8ad1b;
  --accent-hover:    #e99d16;
  --accent-ink:      #762018;

  --green:         #3f7b16;
  --amber:         #8f5c00;
  --orange:        #c2570c;
  --red:           #991b1b;
  --blue:          #2f63c9;
  --paused:        #6d4ca3;
}

/* ---------- Pizzabakeren mørk ---------- */

html[data-page-style="minimalistic"][data-theme="pizzabakeren-dark"] {
  color-scheme: dark;

  --bg:            #1b100d;
  --bg-cream:      #1b100d;
  --bg-cream-2:    #24150f;
  --surface:       #1b100d;
  --card:          #1b100d;
  --paper:         #1b100d;
  --side-bg:       #1b100d;
  --page-backdrop: #1b100d;

  --border:        color-mix(in srgb, var(--ink) 18%, var(--bg-cream));
  --border-strong: color-mix(in srgb, var(--ink) 28%, var(--bg-cream));

  --ink:           #fbecc4;
  --ink-2:         #fff7d7;
  --muted:         #c9a27c;
  --muted-2:       #a8835f;

  --primary:         #f8ad1b;
  --primary-hover:   #ffc04a;
  --primary-bright:  #ffd27a;
  --primary-pale:    #ffe08a;
  --primary-soft:    color-mix(in srgb, var(--primary) 10%, var(--bg-cream));
  --primary-ink:     #ffd27a;
  --primary-rgb:     248, 173, 27;
  --on-primary:      #3a0f0b;
  --card-hover:      var(--primary-soft);
  --theme-logo:      var(--primary);

  --accent:          #e8715f;
  --accent-hover:    #f08a7a;
  --accent-ink:      #f4a090;

  --green:         #22c55e;
  --amber:         #f5c451;
  --orange:        #f97316;
  --red:           #f87171;
  --blue:          #a8e2ee;
  --paused:        #a78bfa;
}

/* ---------- Brand mark ---------- */
/* The speech bubble mark is square. On dark themes it sits on a small cream
   tile so the burgundy bubble keeps its edge. */
.brand-mark,
.mobile-brand .brand-mark {
  width: 32px;
  height: 31px;
}

.mobile-brand .brand-mark {
  width: 26px;
  height: 25px;
}

/* The login brand uses Ligo's mark, name and product line, with the square
   bubble instead of Ligo's wide symbol. */
.brand-mark.brand-mark-large {
  width: 37px;
  height: 35px;
}

html.dark .brand-mark {
  padding: 2px;
  border-radius: var(--radius-sm);
  background: #fff7d7;
}

.brand-wordmark {
  display: block;
  width: 180px;
  height: auto;
}

html.dark .brand-wordmark {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: #fff7d7;
}

/* ---------- Theme picker ---------- */
/* From ligo-regnskap-automatisering, written with the Ligo token names. */

.theme-picker > summary {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  font: 400 var(--fs-label)/1.5 var(--font-mono);
  cursor: pointer;
  list-style: none;
}

.theme-picker > summary::-webkit-details-marker {
  display: none;
}

.theme-picker > summary:is(:hover, :focus-visible),
.theme-picker[open] > summary {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--ink);
  outline: none;
}

.theme-picker svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-picker-current {
  margin-left: auto;
  color: var(--muted);
}

.theme-picker-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 6px 0 8px;
}

.theme-option {
  display: flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font: 400 var(--fs-ui-small)/1.4 var(--font-sans);
  text-align: left;
  cursor: pointer;
}

.theme-option i {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  background: var(--swatch);
}

.theme-option:is(:hover, :focus-visible, [aria-pressed="true"]) {
  border-color: var(--primary);
  background: var(--primary-soft);
  outline: none;
}

@media (pointer: coarse) {
  .theme-option,
  .theme-picker > summary {
    min-height: 44px;
  }
}