/* The one place for how kirtan.am looks. index.html and app.js only use these names.
   To change the look, change a value here. To add a theme, redefine the colours under a selector like [data-theme="name"]. */
:root {
  color-scheme: dark;

  /* Surfaces */
  --color-bg: #0d0c0b;
  --color-surface: #1c1a18;
  --color-border: #2c2926;
  --color-backdrop: rgba(255, 255, 255, .055); /* the column of the current beat */

  /* The rhythm grid: faint for each cell, stronger for each matra, strongest for each vibhag. */
  --color-grid: rgba(255, 255, 255, .035);
  --color-grid-matra: rgba(255, 255, 255, .09);
  --color-grid-vibhag: rgba(255, 255, 255, .24);

  /* Glass buttons on the panes, and the studio the instruments sit in: black, with a floor and a cool light from behind. */
  --color-glass: rgba(255, 255, 255, .1);
  --color-glass-hover: rgba(255, 255, 255, .2);
  --color-glass-edge: rgba(255, 255, 255, .22);
  --color-space: #060606;
  --color-floor: #2a2a2b;
  --color-rim: #b9c8dc;
  --color-loop: rgba(255, 255, 255, .2); /* the stretch being looped, on the map */

  /* Studio: the page's own black, with soft ivory lines. */
  --color-studio-bg: #0d0c0b;
  --color-studio-panel: #131210;
  --color-studio-edge: #24211e;
  --color-studio-text-muted: #aea595;
  --color-studio-grid: rgba(244, 230, 205, .025);
  --color-studio-grid-matra: rgba(244, 230, 205, .07);
  --color-studio-grid-vibhag: rgba(244, 230, 205, .18);
  --color-studio-glass: rgba(244, 230, 205, .1);
  --color-studio-glass-hover: rgba(244, 230, 205, .2);
  --color-studio-glass-edge: rgba(244, 230, 205, .24);
  --color-studio-hover: rgba(244, 230, 205, .07);
  --color-studio-black-note: #1c1a18;
  --color-studio-black-edge: rgba(244, 230, 205, .42);

  /* Text */
  --color-text: #f4f1ea;
  --color-text-muted: #958f85;

  /* Orange means one thing: what is sounding now. */
  --color-now: #ff8320; /* the signature orange, measured off a falling note: what is sounding now */
  --color-now-light: #ff9a2d; /* its top */
  --color-now-deep: #ff801f; /* its foot */
  --gradient-now: linear-gradient(180deg, var(--color-now-light), var(--color-now-deep));
  --gradient-now-along: linear-gradient(90deg, var(--color-now-deep), var(--color-now-light)); /* the same on a bar lying along time: its foot is where it starts */
  --color-now-scene: #ff7a1a; /* in the 3D scenes, where see-through notes and light soften it into the signature orange */
  --color-on-now: #000;
  --color-now-row: rgba(255, 131, 32, .16); /* the row of a key being played, across Studio's voice and harmonium */

  /* Notes */
  --color-membrane: #8c7757; /* a drum head, under each stroke in the Tracks view */
  --color-syahi: #15120e;
  --color-membrane-patch: #5b4630;
  --color-membrane-muted: #453a2b; /* a closed stroke: the head darkens and its mark dims */
  --color-stroke-muted: #bdb29c;
  --color-note-idle: #3b3733; /* a chord not sounding yet */
  --color-melody: #f4f1ea;
  --color-on-melody: #000;

  /* The harmonium's keys */
  --color-key-white-far: #f6ead2; /* each key runs from its far end to the end at the player */
  --color-key-white-near: #e4d3b0;
  --color-key-black-far: #292524;
  --color-key-black-near: #0c0a09;
  --color-key-white-text: #2a2723;
  --color-key-black-text: #958f85;
  --color-mic-body: #26262a; /* the small microphone on the key being sung */
  --color-mic-grille: #c4c7cc;
  --color-mic-mesh: #1f2022; /* the holes in its grille */

  /* The 3D hands on the mridanga */
  --color-hand: #d1b499;

  /* The 3D karatalas */
  --color-karatal-strap: #8c2f22;
  --color-karatal: #e3bb5e;

  /* The 3D mridanga */
  --color-drum-clay: #b08a74;
  --color-drum-skin: #dcc8a0;
  --color-drum-strap: #dbcfb8;
  --color-drum-braid: #6b4a2c;
  --color-drum-syahi: #171513;
  --color-drum-paste: #8a5230;
  --color-drum-strip: #eeb42e;
  --color-drum-strip-border: #a32a1e;

  /* Instrument drawings */
  --color-drawing-line: #958f85;
  --color-drawing-fill: #2c2926;
  --color-drawing-detail: #3b3733;
  --color-drawing-hole: #0d0c0b;

  /* Type */
  --font-sans: Figtree, system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --weight-normal: 500;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-s: 13px;
  --text-m: 14px;
  --text-base: 15px;
  --text-l: 16px;
  --text-xl: 20px;
  --text-karaoke: clamp(8.5px, 1.08cqw, 26px); /* sized to the instruments, so both mantras share one size and the longer fits its pane */
  --text-karaoke-phone: 13px;
  --text-drum-bol: 26px;
  --text-bar: clamp(9px, .9vw, 11px);

  /* Shape. Space is in steps of 2px: --space-4 is 8px. */
  --radius-xs: 3px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-round: 50%;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 18px;
  --space-11: 22px;
  --space-12: 24px;

  /* Sizes */
  --size-control: 44px;
  --size-control-s: 36px;
  --size-control-xs: 28px;
  --size-map: 44px; /* how tall the kirtan map is to touch */
  --size-track-footer: 36px; /* the master along the bottom of Tracks */
  --size-master-fader: 360px;
  --size-master-embers: 84px; /* how high the master's embers can rise */
  --size-mixer-block: 200px;
  --size-map-band: 24px; /* how tall it looks */
  --size-karaoke-strip: 36px;
  --size-karaoke-strip-phone: 26px;
  --size-control-phone: 32px;
  --size-footer-phone: 56px;
  --size-track-ruler: 18px;
  --size-track-head: 112px; /* the longest name, and a small keyboard */
  --size-track-button: 32px;
  --color-plate: #4c4029; /* a karatal plate, muted, behind its arrow */
  --color-plate-boss: #5e4f33;
  --color-plate-open: #8c7757; /* an open strike: the same bright as a drum head */
  --color-plate-open-boss: #a08b68;
  --color-plate-semi: #6c5c40; /* a semi-open strike: between the two */
  --color-plate-semi-boss: #7f6d4d;
  --color-plate-hole: #2a2418;
  --size-track-plate: 56px;
  --size-choice: 52px; /* one choice in the stroke popover */
  --size-choice-head: 40px;
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, .6);
  --size-track-keys: 22px;
  --size-drum-row: 104px; /* one head's line in the Tracks view; the bols lie between the two */
  --size-drum-bols: 54px; /* three rows */
  --size-karatal-row: 104px; /* a name and two rows of buttons, like every track */
  --size-track-pitch: 18px;
  --size-track-bar: 22px; /* a note never gets taller than this, however tall its row */
  --size-track-pitch-focus: 24px;
  --size-cards-column: 180px;
  --size-control-phone-narrow: 20px;
  --size-keyboard-max: 900px;
  --size-drawer: 420px; /* the library, sliding over the page */
  --size-key: 88px;
  --size-rain-min: 190px;
}