/* Generated by brand/ (Cascading AI Art). Do not edit manually.
 * Source: brand/dna/piandojo.dna.json plus the generated palette.
 * Style direction: navy-gold — Midnight Sound Dojo */

:root {
  /* Color roles */
  --bg: #05111f; /* Page background and darkest surface */
  --surface: #0c1d33; /* Second-level surfaces such as sidebar and header */
  --card: #162a45; /* Cards and panels on a surface */
  --border: #223b5a; /* Separators and card borders */
  --accent: #fdcb6e; /* Primary accent for active tabs, progress, and buttons */
  --accent2: #a0c4e3; /* Secondary accent for gradients and highlights */
  --success: #4ecca3; /* Hits, unlocked content, and passed checks */
  --warn: #e28743; /* Expiring time or mastery */
  --danger: #ff6b6b; /* Wrong notes and locked content */
  --text: #f4f6f9; /* Body text on all dark surfaces */
  --muted: #8c9fb5; /* Secondary text, helper lines, and axis labels */

  /* Interaction states derived from semantic roles */
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-strong: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent2-soft: color-mix(in srgb, var(--accent2) 10%, transparent);
  --accent2-strong: color-mix(in srgb, var(--accent2) 18%, transparent);
  --accent2-border: color-mix(in srgb, var(--accent2) 30%, transparent);
  --success-soft: color-mix(in srgb, var(--success) 10%, transparent);
  --success-strong: color-mix(in srgb, var(--success) 18%, transparent);
  --success-border: color-mix(in srgb, var(--success) 30%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 10%, transparent);
  --warn-strong: color-mix(in srgb, var(--warn) 18%, transparent);
  --warn-border: color-mix(in srgb, var(--warn) 30%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 10%, transparent);
  --danger-strong: color-mix(in srgb, var(--danger) 18%, transparent);
  --danger-border: color-mix(in srgb, var(--danger) 30%, transparent);
  --on-accent: var(--bg);
  --overlay: color-mix(in srgb, var(--bg) 68%, transparent);
  --text-faint: color-mix(in srgb, var(--text) 2%, transparent);

  /* Belt colors */
  --belt-white: #ebeff5; /* White, 9th Kyu */
  --belt-yellow: #f1c40f; /* Yellow, 8th Kyu */
  --belt-orange: #e67e22; /* Orange, 7th Kyu */
  --belt-green: #27ae60; /* Green, 5th Kyu */
  --belt-blue: #2980b9; /* Blue, 4th Kyu */
  --belt-brown: #873600; /* Brown, 2nd Kyu */
  --belt-dan1: #212f3d; /* Black, 1st Dan */
  --belt-dan2: #11161d; /* Black, 2nd Dan */

  /* Radii */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 16px;
  --radius-full: 9999px;
  --radius: var(--radius-medium); /* Compatibility name for the consuming app */

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --spacing-l: 36px;
  --spacing-xl: 48px;

  /* Type scale */
  --font-micro-size: 12px;
  --font-micro-weight: 500;
  --font-micro-line-height: 1.4;
  --font-small-size: 15px;
  --font-small-weight: 500;
  --font-small-line-height: 1.4;
  --font-text-size: 18px;
  --font-text-weight: 400;
  --font-text-line-height: 1.5;
  --font-large-size: 22px;
  --font-large-weight: 600;
  --font-large-line-height: 1.4;
  --font-title-size: 32px;
  --font-title-weight: 700;
  --font-title-line-height: 1.3;
  --font-display-size: 48px;
  --font-display-weight: 800;
  --font-display-line-height: 1.2;
  --font-display-family: "Playfair Display", system-ui, sans-serif;
  --font-text-family: "IBM Plex Sans", system-ui, sans-serif;

  /* Shadows */
  --shadow-card: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-floating: 0 12px 28px rgba(0,0,0,0.6);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --curve: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Components. Every color references a role rather than a hex value. */

/* Primary confirmation action */
.brand-button-primary {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-medium);
  padding: 18px 32px;
  font-weight: 700;
  transition: background var(--duration-fast) var(--curve);
}

/* Quiet secondary action */
.brand-button-quiet {
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: var(--radius-medium);
  padding: 18px 32px;
  font-weight: 500;
  transition: background var(--duration-fast) var(--curve);
}

/* Focus area for exercises and lessons */
.brand-card {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  padding: 24px 24px;
  font-weight: 400;
  transition: background var(--duration-fast) var(--curve);
}

/* Belt or mode status */
.brand-chip {
  background: var(--surface);
  color: var(--accent2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-weight: 600;
  transition: background var(--duration-fast) var(--curve);
}

/* Important system and progress message */
.brand-banner {
  background: var(--warn);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-medium);
  padding: 16px 24px;
  font-weight: 600;
  transition: background var(--duration-fast) var(--curve);
}

/* Metronome value or note input */
.brand-input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  padding: 16px 20px;
  font-weight: 400;
  transition: background var(--duration-fast) var(--curve);
}