/* ============================================================================
   Houseband — design tokens.
   Generated from the Houseband design system (korda-design-system-13a559ef — the handoff predates the rename).
   Do not hand-edit these values; they are extracted from the shipping app.
   ============================================================================ */

/* ---------- typography ---------- */
/* Houseband type — the platform's Dynamic Type styles. Houseband has NO custom type scale (spec §4);
   these are the iOS text styles at the DEFAULT Dynamic Type size, given as tokens so web
   recreations land on the same values. Anything carrying language uses one of these. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* SUBSTITUTION NOTE: the handoff shipped no font binaries — Houseband uses the iOS system face
     (SF Pro). On Apple hardware the stack below resolves to the real thing; elsewhere it falls
     back to Inter, the closest grotesque available on Google Fonts. See readme.md. */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", sans-serif;
  --font-mono-digit: var(--font-system); /* monospacedDigit() = same face, tabular figures */
  --font-feature-mono-digit: "tnum" 1; /* @kind other */

  /* Dynamic Type text styles (default size) — size / line-height / weight */
  --text-large-title-size: 34px;   --text-large-title-line: 41px;
  --text-title-size: 28px;         --text-title-line: 34px;
  --text-title2-size: 22px;        --text-title2-line: 28px;
  --text-title3-size: 20px;        --text-title3-line: 25px;
  --text-headline-size: 17px;      --text-headline-line: 22px;  --text-headline-weight: 600;
  --text-body-size: 17px;          --text-body-line: 22px;
  --text-callout-size: 16px;       --text-callout-line: 21px;
  --text-subheadline-size: 15px;   --text-subheadline-line: 20px;
  --text-footnote-size: 13px;      --text-footnote-line: 18px;
  --text-caption-size: 12px;       --text-caption-line: 16px;
  --text-caption2-size: 11px;      --text-caption2-line: 13px;

  /* Fixed sizes — permitted ONLY for non-prose chrome that must not reflow (spec §4).
     The full set in shipping use: 9 10 11 12 13 14 15 16 17 18 26 30 40 46. */
  --chrome-9: 9px;   --chrome-10: 10px; --chrome-11: 11px; --chrome-12: 12px;
  --chrome-13: 13px; --chrome-14: 14px; --chrome-15: 15px; --chrome-16: 16px;
  --chrome-17: 17px; --chrome-18: 18px; --chrome-26: 26px; --chrome-30: 30px;
  --chrome-40: 40px; --chrome-46: 46px;
  /* The one display size in the product: Home's "Houseband" wordmark. */
  --wordmark-size: 42px;
  --wordmark-tracking: -1.4px; /* @kind spacing */

  /* Tracking used on uppercase micro-labels */
  --tracking-pro-badge: 0.5px; /* @kind spacing */   /* PRO, 9px bold */
  --tracking-eyebrow: 1.2px; /* @kind spacing */     /* RECENT / RESULTS, 12px semibold */
  --tracking-fact: 0.66px; /* @kind spacing */       /* DEFAULT FOR NYLON, 11px */
  --tracking-suggestion: 0.6px; /* @kind spacing */  /* Pairs well, 10px semibold */
  --tracking-section: 0.5px; /* @kind spacing */     /* LAYER LEVELS, caption semibold */
  --tracking-pro-capsule: 0.6px; /* @kind spacing */ /* PRO ✓ toolbar capsule, 13px bold */

  /* Semantic roles (spec §4) */
  --text-page-title: 700 var(--text-title-size) / var(--text-title-line) var(--font-system); /* @kind font */
  --text-section-heading: 400 var(--text-title3-size) / var(--text-title3-line) var(--font-system); /* @kind font */
  --text-row-label: 500 var(--chrome-16) / 21px var(--font-system); /* @kind font */
  --text-row-label-picked: 600 var(--chrome-16) / 21px var(--font-system); /* @kind font */
  --text-secondary-label: 400 var(--text-subheadline-size) / var(--text-subheadline-line) var(--font-system); /* @kind font */
  --text-caption-label: 400 var(--text-caption-size) / var(--text-caption-line) var(--font-system); /* @kind font */
}

/* ---------- palette ---------- */
/* Houseband palette — TWO HUES TOTAL: rust and teal, plus neutrals (spec §2.1).
   Do not introduce a third hue. A third was tried and removed.

   Fixed colours do NOT invert with the colour scheme: they sit on controls, not on the page. */

:root {
  /* --- Fixed --- */
  --accent: #E8A33D;      /* rust / warm amber. Harmony, warmth, selection, Pro. The brand colour. */
  --rust: #E8A33D;        /* alias of accent, used where the BACKDROP GLOW is meant */
  --on-accent: #1A1206;   /* the ONLY legal foreground on an accent fill. Never white. */
  --note-fill: #00C9D6;   /* teal. Melody notes, suggestions — the cool complement to rust. */

  /* Rim colours for a hand-rolled bevel. Tinted, never neutral: a refracting edge carries the
     hue of what it refracts. white mixed 30% → note-fill / black mixed 18% → note-fill. */
  --rim-highlight: #B3EFF3;
  --rim-shadow: #002427;

  /* --- Scheme-dependent neutral --- */
  /* `primary` is the platform's adaptive label colour; every neutral wash is an alpha of it. */
  --primary: #FFFFFF;
  --primary-rgb: 255, 255, 255; /* @kind other */

  /* Content levels (SwiftUI .primary / .secondary / .tertiary on this backdrop) */
  --fg-primary: rgba(var(--primary-rgb), 1);
  --fg-secondary: rgba(var(--primary-rgb), 0.60);
  --fg-tertiary: rgba(var(--primary-rgb), 0.35);
  --fg-row-label: rgba(var(--primary-rgb), 0.90);
  --fg-muted: rgba(var(--primary-rgb), 0.45);
  --fg-segment-unpicked: rgba(var(--primary-rgb), 0.60);

  /* --- Semantic meaning of the two hues (spec §2.2) --- */
  /* Rust = the user's own choice, or a fact about it. Teal = the app's contribution or opinion. */
  --hue-user-choice: var(--accent);
  --hue-app-suggestion: var(--note-fill);
  --text-fact: var(--accent);        /* "DEFAULT FOR NYLON" */
  --text-suggestion: var(--note-fill); /* "Pairs well" — never rust */
  --melody-note: var(--note-fill);
  --playhead: var(--accent);

  /* Destructive is the platform red, used only in swipe actions and the record button. */
  --destructive: #FF453A;
}

[data-theme="light"] {
  --primary: #000000;
  --primary-rgb: 0, 0, 0; /* @kind other */
  --fg-secondary: rgba(0, 0, 0, 0.60);
  --fg-tertiary: rgba(0, 0, 0, 0.35);
  --destructive: #FF3B30;
}

/* ---------- surfaces ---------- */
/* Houseband surfaces — every token here is a SURFACE-versus-GROUND relationship, and the
   relationship itself flips between schemes (spec §2.3). Light mode is a separate, co-designed
   palette, never an inversion of dark. */

:root {
  /* The page. Never the brightest thing on screen — glass renders LIGHTER than its backdrop. */
  --background: #0A0A0C;

  /* The flat, faint wash under a page surface. ALWAYS white in both schemes: a panel is always
     the lighter of the pair. Cannot go heavier — a thick fill leaves glass nothing to refract. */
  --panel-fill: rgba(255, 255, 255, 0.05);
  --panel-stroke: rgba(var(--primary-rgb), 0.12);

  /* The card edge, as a top-lit hairline: bright at the top, fading down, so a panel has a light
     direction instead of a flat border. INVERTS in light mode (a raised white card on a grey
     ground gets a soft DARK edge at the top). */
  --card-edge: linear-gradient(to bottom, rgba(255,255,255,0.22), rgba(255,255,255,0.04), transparent) /* @kind color */;
  --card-edge-top: rgba(255, 255, 255, 0.22);

  /* Nearly a no-op on a near-black page; the single strongest separation lever on a light one. */
  --card-shadow: rgba(0, 0, 0, 0.10);
  --shadow-card: 0 10px 16px rgba(0, 0, 0, 0.10);
  --shadow-panel: 0 8px 16px rgba(0, 0, 0, 0.10);

  /* Opaque backing for a list row and the tray revealed behind it when swiped. Must be OPAQUE. */
  --row-background: #0E0E10;

  /* --- Selection (spec §7) — one hue, three descending volumes --- */
  --selection-ring: rgba(232, 163, 61, 0.70); /* tier 2: the ring on a picked chip/cell/toggle */
  --row-wash: rgba(var(--primary-rgb), 0.10); /* tier 3: wash behind a picked row. NOT hued. */
  --selection-bar: var(--accent);             /* tier 3: 3pt bar on the leading edge */

  /* --- Misc structural --- */
  --bar-line: rgba(var(--primary-rgb), 0.10);      /* timeline bar + beat divisions */
  --divider: rgba(var(--primary-rgb), 0.07);       /* hairline between selection rows */
  --fader-track: rgba(var(--primary-rgb), 0.12);   /* a groove cut INTO the surface, never glass */
  --fader-fill: rgba(232, 163, 61, 0.85);
  --chord-strip: rgba(var(--primary-rgb), 0.05);   /* the timeline's tappable chord row */

  /* Tier 1's top-lit rim. LITERAL white, never adaptive: it sits on fixed amber, not on the page. */
  --tier1-rim: linear-gradient(to bottom, rgba(255,255,255,0.35), transparent) /* @kind color */;
  --tier1-rim-strong: linear-gradient(to bottom, rgba(255,255,255,0.40), transparent) /* @kind color */;

  /* PRO badge — an outline, not a fill (spec §9.2). */
  --pro-badge-fill: rgba(232, 163, 61, 0.14);
  --pro-badge-stroke: rgba(232, 163, 61, 0.55);
}

[data-theme="light"] {
  --background: #F4F1EC;   /* warm, not the system's neutral #F2F2F7 — a neutral grey turns the
                              rust corner glow green-grey and reads as dirt on the page */
  --panel-fill: rgba(255, 255, 255, 0.38);
  --card-edge: linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.03), transparent) /* @kind color */;
  --card-edge-top: rgba(0, 0, 0, 0.10);
  --card-shadow: rgba(0, 0, 0, 0.16);
  --shadow-card: 0 10px 16px rgba(0, 0, 0, 0.16);
  --shadow-panel: 0 8px 16px rgba(0, 0, 0, 0.16);
  --row-background: #FFFFFF; /* white, not the #F2F2F7-class grey — that is within a percent of
                                the page, so a swiped row would read as a hole */
}

/* ---------- geometry ---------- */
/* Houseband geometry — radii and the fixed dimensions (spec §5.1, §5.2).
   Rounded rectangles use a CONTINUOUS corner curve wherever the platform offers it. */

:root {
  --radius-card: 22px;        /* large frosted cards and section frames */
  --radius-hero: 20px;        /* Home's Record / Import heroes — one step larger than the card below */
  --radius-list-card: 18px;   /* the takes-list card and its empty states */
  --radius-chip: 14px;        /* badges, steppers, pills, chips, small controls */
  --radius-capsule: 999px;    /* segmented segments + track, PRO badge, fader track and fill */
  --radius-inner: 12px;       /* the plain .quaternary action button */
  --radius-small: 10px;       /* LabeledSegmentedPicker's value buttons */

  /* Fixed dimensions */
  --page-margin: 16px;              /* the horizontal margin EVERY settings page holds content to */
  --page-margin-home: 18px;         /* Home's own margin */
  --instrument-cell-height: 61px;
  --selection-row-height: 62px;      /* every row of every selection list, app-wide. A minHeight. */
  --selection-row-height-compact: 52px;
  --transport-secondary: 52px;       /* Rewind, Loop */
  --transport-primary: 68px;         /* Play / Pause */
  --transport-labelled-w: 62px;      /* Set beat 1 */
  --toggle-face: 44px;               /* minimal toggle button face */
  --segmented-height: 34px;
  --segmented-inset: 3px;            /* the inset track */
  --fader-track-height: 8px;
  --fader-thumb: 26px;
  --badge-height: 50px;              /* the key/tempo/notes badge row */
  --audition-pill-height: 54px;
  --chip-rail-height: 40px;          /* instrument / bass rail chips */
  --category-chip-height: 32px;      /* category rail chips */
  --hero-card-height: 140px;
  --search-field-height: 46px;
  --pro-capsule-height: 38px;
  --recent-row-height: 56px;
  --swipe-action-width: 62px;
  --divider-inset: 50px;             /* COMPUTED: 14 row pad + 24 glyph + 12 gap */
  --divider-inset-home: 48px;
  --timeline-chord-strip: 56px;
  --timeline-height: 320px;

  /* Stroke weights */
  --hairline: 0.5px;
  --stroke-card: 1px;
  --stroke-ring: 1px;
  --stroke-pro-badge: 0.75px;
  --stroke-selection-bar: 3px;
}

/* ---------- spacing ---------- */
/* Houseband spacing — a 2/4/6/8/10/12/14/20 progression, deliberately NOT snapped to a strict 8pt
   grid (spec §5.3). Use the named roles; they say why the number is what it is. */

:root {
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-26: 26px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;

  /* Roles */
  --gap-segments: var(--space-6);        /* segments within a picker */
  --gap-chips: var(--space-8);           /* chips in a rail, badges in a row, a toggle + its label */
  --gap-pills: var(--space-10);          /* audition pills, related rows in a group */
  --gap-controls: var(--space-14);       /* transport controls, distinct controls in a row */
  --pad-section: var(--space-16);        /* internal padding of a section frame */
  --gap-sections: var(--space-20);       /* between section frames down a page */
  --pad-page-bottom: var(--space-20);    /* ~20 bottom padding on dense grid pages */
  --pad-row-v: var(--space-10);          /* selection row vertical padding */
  --pad-row-h: var(--space-14);          /* selection row horizontal padding */
}

/* ---------- effects ---------- */
/* Houseband effects — the backdrop recipe, the glass recipe, the locked-content drain, motion.
   These are the three surface recipes of spec §6 and the four backdrop layers of §3, as tokens.

   THE TWO LOAD-BEARING RULES (spec §13):
   1. Never tint glass with the accent. Accent is CONTENT on neutral glass, or a solid fill.
   2. A surface underneath glass may be flat and faint, but never glass or material — both blur,
      and glass with nothing to refract renders as flat grey. */

:root {
  /* --- Glass --- */
  /* `regular`, not `clear`: these hold text over a tinted backdrop. */
  --glass-blur: 20px;
  --glass-saturate: 1.7; /* @kind other */
  --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); /* @kind other */
  --glass-fill: rgba(255, 255, 255, 0.05);   /* == panel-fill; the EXPLICIT fill is load-bearing */

  /* --- Backdrop (spec §3), four layers in draw order --- */
  /* 1.0 dark, 0.85 light. The dial to turn if light mode reads flat, or reads dirty — in that order. */
  --backdrop-strength: 1; /* @kind other */
  --backdrop-glow-rust: radial-gradient(circle 65vmax at 5% 2%,
      rgba(232,163,61,0.38) 0%, rgba(232,163,61,0.18) 28%,
      rgba(232,163,61,0.06) 52%, rgba(232,163,61,0) 78%) /* @kind color */;
  --backdrop-glow-teal: radial-gradient(circle 65vmax at 95% 98%,
      rgba(0,201,214,0.30) 0%, rgba(0,201,214,0.14) 30%,
      rgba(0,201,214,0.04) 55%, rgba(0,201,214,0) 80%) /* @kind color */;
  /* Layer 4: a vertical band IN THE BASE COLOUR, giving text a quiet ground exactly where the two
     glows would otherwise meet. */
  --backdrop-band: linear-gradient(to bottom,
      transparent 0%, transparent 32%,
      color-mix(in srgb, var(--background) 88%, transparent) 46%,
      color-mix(in srgb, var(--background) 88%, transparent) 58%,
      transparent 74%, transparent 100%) /* @kind color */;

  /* --- Bevel (spec §8.2) — volume on a dark page comes from the RIM, not a shadow --- */
  --bevel-sheen: linear-gradient(to bottom,
      rgba(179,239,243,0.20), rgba(179,239,243,0.05), transparent) /* @kind color */;
  --bevel-rim-raised: linear-gradient(to bottom,
      rgba(179,239,243,0.55), rgba(179,239,243,0.08), rgba(0,36,39,0.32)) /* @kind color */;
  --bevel-rim-recessed: linear-gradient(to bottom,
      rgba(0,36,39,0.45), rgba(179,239,243,0.03), rgba(179,239,243,0.14)) /* @kind color */;
  --bevel-recess-fill: rgba(0, 36, 39, 0.10);
  --bevel-recess-inner-shadow: inset 0 3px 5px rgba(0, 36, 39, 0.45); /* @kind shadow */

  /* --- Pro / locked (spec §9.1) --- */
  /* Applies to a locked row's CONTENT ONLY — never the badge, never the row background.
     Greyscale matters more than the opacity. 0.42, not lower: the catalogue is the pitch. */
  --locked-filter: grayscale(1); /* @kind other */
  --locked-opacity: 0.42; /* @kind other */

  /* --- Trailing fade on a horizontal rail (decorative; scrolling is the real affordance) --- */
  --rail-fade: linear-gradient(to right, #000 0%, #000 87%, transparent 100%) /* @kind color */;

  /* --- Motion (spec §11) — restrained. No custom animation system. --- */
  --ease-out-quick: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-press: 120ms; /* @kind other */   /* stepper grow-on-press */
  --dur-quick: 150ms; /* @kind other */   /* tap pulse, sensitivity bar */
  --dur-standard: 200ms; /* @kind other */   /* search-field cancel, canvas snap, pip settle */
  --dur-page: 250ms; /* @kind other */   /* timeline follow */
  --spring-row: cubic-bezier(0.24, 0.9, 0.28, 1); /* @kind other */ /* swipe settle ≈ spring(0.28, 0.82) */
  --beat-ring: cubic-bezier(0.2, 0.7, 0.4, 1); /* @kind other */ /* the record screen's beat ring */
}

[data-theme="light"] {
  --backdrop-strength: 0.85; /* @kind other */
  --glass-fill: rgba(255, 255, 255, 0.38);
  --backdrop-glow-rust: radial-gradient(circle 65vmax at 5% 2%,
      rgba(232,163,61,0.323) 0%, rgba(232,163,61,0.153) 28%,
      rgba(232,163,61,0.051) 52%, rgba(232,163,61,0) 78%) /* @kind color */;
  --backdrop-glow-teal: radial-gradient(circle 65vmax at 95% 98%,
      rgba(0,201,214,0.255) 0%, rgba(0,201,214,0.119) 30%,
      rgba(0,201,214,0.034) 55%, rgba(0,201,214,0) 80%) /* @kind color */;
}

/* ---------- base ---------- */
/* Houseband base — a minimal reset, the default type, link colours, and the three surface recipes
   of spec §6 as utility classes. Components use the tokens directly; these exist so a one-off
   HTML page can lay down a correct backdrop and a correct card without re-deriving them. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--fg-primary);
  font: 400 var(--text-body-size) / var(--text-body-line) var(--font-system);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: color-mix(in srgb, var(--accent) 82%, var(--primary)); }
a:active { color: color-mix(in srgb, var(--accent) 70%, var(--rim-shadow)); }

.houseband-mono-digit { font-variant-numeric: tabular-nums; }

/* The shared backdrop behind every page. Four layers, in draw order. */
.houseband-backdrop {
  position: relative;
  background-color: var(--background);
  background-image: var(--backdrop-band), var(--backdrop-glow-teal), var(--backdrop-glow-rust);
}

/* §6.1 glassCard — a real frosted card. Use ONLY for a card that contains no glass of its own. */
.houseband-glass-card {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  box-shadow: var(--shadow-card);
}
.houseband-glass-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; padding: var(--stroke-card);
  background: var(--card-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* §6.2 pageSection — a FLAT section frame. This is the surface you put glass on. No blur. */
.houseband-page-section {
  position: relative;
  padding: var(--pad-section);
  border-radius: var(--radius-card);
  background: var(--panel-fill);
  box-shadow: var(--shadow-card);
}
.houseband-page-section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; padding: var(--stroke-card);
  background: var(--card-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* §6.3 glassPanel — Home's frosted surface. Order is fill → stroke → glass. */
.houseband-glass-panel {
  position: relative;
  border-radius: var(--radius-list-card);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 0 0 var(--hairline) var(--panel-stroke);
}

/* Locked content: the drain goes on the CONTENT, never the badge or the row background. */
.houseband-locked { filter: var(--locked-filter); opacity: var(--locked-opacity); }