/* =========================================================================
   theme.css — colours, sizing variants, gate style variants
   ========================================================================= */

:root {
    /* base palette */
    --palette-gold:       #b8860b;
    --palette-burgundy:   #7a1f2b;
    --palette-forest:     #2f5d3a;
    --palette-indigo:     #2c3e7b;
    --palette-terracotta: #b85a3d;
    --palette-graphite:   #3a3a3a;
    --palette-teal:       #1f6b6b;
    --palette-plum:       #5b2a55;
    --palette-saffron:    #d97706;
    --palette-slate:      #4a5568;

    /* surfaces */
    --color-bg:           #ffffff;
    --color-bar-bg:       rgba(255, 255, 255, 0.94);
    --color-text-primary: #1a1a1a;
    --color-text-muted:   #6b6b6b;
    --color-divider:      rgba(0, 0, 0, 0.12);
    --color-row-hover:    rgba(0, 0, 0, 0.03);
    --color-toast-bg:     #1a1a1a;
    --color-toast-text:   #ffffff;

    /* accent — default gold; theme.js overrides on <body> */
    --color-accent: var(--palette-gold);

    /* Scheme-aware variables. Each is overridden by theme.js when a
       multi-colour scheme (sunrise / garden / jewel) is active.
       For single accent colours these fall back to --color-accent so the
       per-element CSS still resolves to a single colour. */
    --color-gate-pillar-l:    var(--color-accent);
    --color-gate-pillar-r:    var(--color-accent);
    --color-gate-arch-outer:  var(--color-accent);
    --color-gate-arch-inner:  var(--color-accent);
    --color-gate-om:          var(--color-accent);
    --color-player-prev:      var(--color-accent);
    --color-player-play:      var(--color-accent);
    --color-player-next:      var(--color-accent);
    --color-player-repeat:    var(--color-accent);
    --color-progress:         var(--color-accent);
    --color-chip-1:           var(--color-accent);
    --color-chip-2:           var(--color-accent);
    --color-chip-3:           var(--color-accent);
    --color-chip-4:           var(--color-accent);
    --color-chip-5:           var(--color-accent);

    /* Per-part Óm colours (v1.29) — one variable per natural visual
       subpath of the Devanagari Óm. For single-accent palettes all five
       resolve to --color-accent, producing a clean monochrome Óm. For
       multi-colour schemes theme.js writes distinct values so the glyph
       reads multi-coloured like the OG-preview "Mantry" letters. */
    --color-om-hook:          var(--color-accent);
    --color-om-upper:         var(--color-accent);
    --color-om-lower:         var(--color-accent);
    --color-om-crescent:      var(--color-accent);
    --color-om-dot:           var(--color-accent);

    /* gate stroke width — overridden by .gate-bold */
    --gate-stroke: 1.4;

    /* default button size — body.btn-size-* override these */
    --btn-round-size:     62px;
    --btn-play-size:      75px;
    --btn-icon-size:      28px;
    --btn-play-icon-size: 34px;

    /* default song font size — body.song-font-* override */
    --song-font-size: 1rem;
}

body {
    background: var(--color-bg);
    color: var(--color-text-primary);
}

/* ---------- button size variants ------------------------------------- */

body.btn-size-small {
    --btn-round-size:     48px;
    --btn-play-size:      58px;
    --btn-icon-size:      22px;
    --btn-play-icon-size: 26px;
}

/* btn-size-normal is the default (defined in :root above) */

body.btn-size-large {
    --btn-round-size:     76px;
    --btn-play-size:      92px;
    --btn-icon-size:      34px;
    --btn-play-icon-size: 42px;
}

/* mobile cap — at "large" the buttons would wrap; let them */
@media (max-width: 500px) {
    body.btn-size-small  { --btn-round-size: 44px; --btn-play-size: 53px;
                           --btn-icon-size: 20px; --btn-play-icon-size: 24px; }
    body                 { --btn-round-size: 56px; --btn-play-size: 68px;
                           --btn-icon-size: 26px; --btn-play-icon-size: 32px; }
    body.btn-size-large  { --btn-round-size: 68px; --btn-play-size: 82px;
                           --btn-icon-size: 30px; --btn-play-icon-size: 38px; }
}

/* ---------- song font size variants ---------------------------------- */

body.song-font-large   { --song-font-size: 1.15rem; }
body.song-font-xlarge  { --song-font-size: 1.3rem;  }

/* ---------- gate stroke (bold) --------------------------------------- */

.gate-bg svg .gate-outline-shapes path,
.gate-bg svg .gate-outline-shapes line,
.gate-bg svg .gate-bases path,
.gate-bg svg .gate-bases line {
    stroke-width: var(--gate-stroke);
}

body.gate-bold { --gate-stroke: 4; }

/* ---------- gate fill (outline / filled) ----------------------------- */

.gate-bg svg .gate-filled-shape { display: none; }

body.gate-filled .gate-bg svg .gate-outline-shapes { display: none; }
body.gate-filled .gate-bg svg .gate-filled-shape   { display: block; }
body.gate-filled .gate-bg svg .gate-bases path     { fill: currentColor; }

/* ============================================================================
   Multi-colour schemes — Sunrise / Garden / Jewel
   ----------------------------------------------------------------------------
   theme.js writes scheme colours into the variables defined in :root above.
   The rules below paint each gate element, each player control, and the
   progress bar with its own variable. For single-colour palettes every
   variable falls back to --color-accent, so the same rules produce a
   tasteful monochrome look. body.is-scheme also tints buttons and chips
   beyond the default hover-only colouring.
   ============================================================================ */

/* --- gate arches always rendered as strokes ---------------------------- */

.gate-arch              { stroke-width: calc(var(--gate-stroke) * 1px); }
.gate-arch--outer       { stroke: var(--color-gate-arch-outer); }
.gate-arch--inner       { stroke: var(--color-gate-arch-inner); }

/* --- gate pillars (outline mode: 4 stroked lines) ---------------------- */

.gate-pillar-line       { stroke-width: calc(var(--gate-stroke) * 1px); }
.gate-pillar-line--l    { stroke: var(--color-gate-pillar-l); }
.gate-pillar-line--r    { stroke: var(--color-gate-pillar-r); }

/* --- gate pillars (filled mode: rectangles) ---------------------------- */

.gate-pillar            { stroke: none; }
.gate-pillar--l         { fill: var(--color-gate-pillar-l); }
.gate-pillar--r         { fill: var(--color-gate-pillar-r); }

/* --- gate bases ------------------------------------------------------- */

.gate-base              { stroke: none; }
.gate-base--l           { fill: var(--color-gate-pillar-l); }
.gate-base--r           { fill: var(--color-gate-pillar-r); }
.gate-base-line         { stroke-width: calc(var(--gate-stroke) * 1px); }
.gate-base-line--l      { stroke: var(--color-gate-pillar-l); }
.gate-base-line--r      { stroke: var(--color-gate-pillar-r); }

/* --- Óm — 5 separate paths, one per visual part ----------------------- *
   The text-rendered Óm of v1.26–v1.28 was replaced by five SVG paths
   extracted from Noto Sans Devanagari (the right S-tail, the upper
   "3" body, the lower curl, the chandrabindu crescent, and the bindu
   dot). Each part has its own CSS variable so multi-colour schemes can
   paint them distinctly; single-accent palettes resolve all five vars
   to --color-accent and the Óm renders in one solid colour.            */

.gate-om-part {
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    paint-order: stroke;
}
.gate-om-hook     { fill: var(--color-om-hook);     stroke: var(--color-om-hook);     }
.gate-om-upper    { fill: var(--color-om-upper);    stroke: var(--color-om-upper);    }
.gate-om-lower    { fill: var(--color-om-lower);    stroke: var(--color-om-lower);    }
.gate-om-crescent { fill: var(--color-om-crescent); stroke: var(--color-om-crescent); }
.gate-om-dot      { fill: var(--color-om-dot);      stroke: var(--color-om-dot);      }

/* --- outline / filled switching --------------------------------------- *
   Always emit both forms; CSS picks which is visible.                    */

.gate-filled-shape                       { display: none; }
body.gate-filled .gate-filled-shape      { display: inline; }
body.gate-filled .gate-outline-shapes    { display: none; }

/* --- Bold weight (existing variant, kept) ----------------------------- */

body.gate-bold { --gate-stroke: 4; }

/* --- Player buttons: paint each control with its own scheme colour --- *
   When a scheme is active (body.is-scheme), each button uses its
   designated colour for both border and icon. Otherwise the original
   hover-only / play-button-only accent behaviour stays untouched.        */

body.is-scheme #btn-prev   { border-color: var(--color-player-prev);   color: var(--color-player-prev);   }
body.is-scheme #btn-play   { border-color: var(--color-player-play);   color: var(--color-player-play);   }
body.is-scheme #btn-next   { border-color: var(--color-player-next);   color: var(--color-player-next);   }
body.is-scheme #btn-repeat { border-color: var(--color-player-repeat); color: var(--color-player-repeat); }

/* Progress bar accent colour — uses --color-accent already (via
   accent-color), but schemes route through --color-progress so the
   progress line can differ from the play-button colour. */
body.is-scheme .progress { accent-color: var(--color-progress); }

/* --- Filter chips: alternate two scheme colours across active chips - *
   2-colour schemes alternate A/B cleanly across any number of chips.
   For single-accent mode every --color-chip-N resolves to --color-accent,
   so the rules degrade to a monochrome look.                            */

body.is-scheme .category-chip.is-active:nth-of-type(2n+1),
body.is-scheme .difficulty-chip.is-active:nth-of-type(2n+1) {
    background: var(--color-chip-1); border-color: var(--color-chip-1);
}
body.is-scheme .category-chip.is-active:nth-of-type(2n),
body.is-scheme .difficulty-chip.is-active:nth-of-type(2n) {
    background: var(--color-chip-2); border-color: var(--color-chip-2);
}

/* --- Multi-colour scheme swatches in the palette --------------------- *
   Single-colour swatches keep .color-swatch styling untouched (defined
   in core.css). Scheme swatches use background-image (a conic gradient
   set by theme.js) and a slightly thicker selected ring.                  */

.color-swatch--scheme {
    background-size: cover;
    background-position: center;
}
.color-swatch--scheme.is-selected {
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text-primary);
}