/* Distinct Mastering website: served at /global.css by Cloudflare Pages. Built by build_ghl.mjs. */
/* Distinct Mastering — generated from tokens.json */
:root, [data-theme="dark"] {
  --bg: #0d0b12; /* Page background. Near-black with a faint violet cast on dark, so the logo purple reads as part of the room, not pasted on. Pure white in light. */
  --surface: #15121c; /* Section bands and panels that sit on bg: the player, form blocks, pricing rows. */
  --surface-raised: #1d1927; /* Cards, inputs, menus and anything lifted off surface. In light it is white and relies on line for its edge. */
  --line: #2b2638; /* Hairline dividers, card edges and table rules. Decorative only, never the only edge of a control. */
  --line-strong: #716996; /* Borders of inputs, checkboxes, radios and the seek-bar track. Holds 3:1 on bg, surface and surface-raised in both themes. */
  --text: #f3f0f9; /* Headings and body copy on bg, surface and surface-raised. 15:1 or better in both themes. */
  --text-muted: #a49db6; /* Secondary copy, captions, labels and timestamps on bg, surface, surface-raised and accent-subtle. 6.4:1 or better in both themes. */
  --accent: #6e38de; /* Logo purple, exact from the logo files. Fills: primary buttons, the player's play button and seek progress, selected states, big colour fields. On dark it is 3:1 against bg, so never use it for text there: use accent-text. */
  --accent-hover: #5f2bcc; /* Pressed and hover fill for anything filled with accent. on-accent stays readable (7.8:1). */
  --on-accent: #ffffff; /* Text and icons on accent and accent-hover fills (6.4:1). */
  --accent-text: #b49aff; /* The text-safe purple: links, quiet-button labels, active tab labels, small purple numerals. 7.4:1 or better on bg, surface and surface-raised in both themes. Also the focus ring colour. */
  --accent-subtle: #221a38; /* Tinted ground for the selected row, the info notice and the quiet button's hover. text and text-muted both pass on it. */
  --focus: var(--accent-text); /* 2px solid focus ring, offset 2px, on every interactive element. 7:1 or better on every surface. */
  --success: #3ccfa8; /* Delivered, approved, paid. Teal leaning toward blue so it never depends on a red-green split with error. Text and icons on bg, surface, surface-raised; always paired with a word or icon. */
  --warning: #f0b341; /* Needs attention: clipping in the mix, revision window closing, file still uploading. Text and icons on bg, surface, surface-raised; always with a word or icon. */
  --error: #ff7b6b; /* Failed upload, wrong file type, payment problem. Text and icons on bg, surface, surface-raised; always with a word or icon. */
  --success-subtle: #10261f; /* Ground of the success notice and the success pill. text and success both pass on it. */
  --warning-subtle: #2a2112; /* Ground of the warning notice and pill. text and warning both pass on it. */
  --error-subtle: #2c1614; /* Ground of the error notice and pill. text and error both pass on it. */
  --scrim: rgba(13, 11, 18, 0.72); /* Overlay laid over photos so white or text copy sits on them; also behind dialogs. */
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45); /* Menus, dialogs and the sticky mini player only. Cards use line, not shadow. */
}
[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f6f4fa;
  --surface-raised: #ffffff;
  --line: #e2ddec;
  --line-strong: #8f87a6;
  --text: #16121e;
  --text-muted: #5c5570;
  --accent: #6e38de;
  --accent-hover: #5f2bcc;
  --on-accent: #ffffff;
  --accent-text: #5a28c8;
  --accent-subtle: #efe9fc;
  --focus: var(--accent-text);
  --success: #0a7a63;
  --warning: #8a5a00;
  --error: #c0392b;
  --success-subtle: #e6f5f1;
  --warning-subtle: #fbf2e1;
  --error-subtle: #fbeae8;
  --scrim: rgba(13, 11, 18, 0.56);
  --shadow-pop: 0 8px 24px rgba(22, 18, 30, 0.12);
}
:root {
  --space-1: 4px; /* Icon to label gap, pill padding top and bottom. */
  --space-2: 8px; /* Gap inside a control group, between a label and its field. */
  --space-3: 12px; /* Button vertical padding, list row padding. */
  --space-4: 16px; /* Phone page gutter, card padding on phones, gap between stacked fields. */
  --space-5: 24px; /* Card padding on desktop, gap in card grids. */
  --space-6: 32px; /* Desktop page gutter, gap between a heading and its content block. */
  --space-7: 48px; /* Space between sections on phones. */
  --space-8: 64px; /* Space between sections on desktop. */
  --space-9: 96px; /* Hero top and bottom padding on desktop. The generous end of the scale: use it, the brand is meant to breathe. */
  --radius-sm: 6px; /* Inputs, checkboxes, tags, table row highlights. */
  --radius-md: 10px; /* Buttons, notices, the audio player's inner controls. */
  --radius-lg: 16px; /* Cards, stat tiles, the player shell, framed photos. Echoes the rounded corners in the logo's letterforms. */
  --radius-pill: 999px; /* Status pills, the seek bar and its thumb, waveform bars, the round play button. */
  --border-hairline: 1px; /* Dividers and card edges, drawn in line. */
  --border-control: 1px; /* Input, checkbox and radio borders, drawn in line-strong. */
  --focus-ring: 2px; /* Focus outline width, in focus, offset 2px. */
  --container-max: 1200px; /* Widest content on desktop pages. */
  --content-max: 680px; /* Max width for running text, forms and the client upload flow. */
  --grid-columns: 12; /* Desktop grid. Collapse to 4 columns under 600px wide, design for 360px. */
  --tap-target: 48px; /* Minimum height and width of anything tapped on a phone: buttons, the play button, the seek thumb's hit area. */
  --font-display: "Sora", "Manrope", system-ui, sans-serif;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-email: "Manrope", Arial, Helvetica, sans-serif;
  --text-display: 600 56px/60px var(--font-display); /* One per page, the hero line. Drops to 40px / 44px under 600px wide. */
  --text-h1: 600 40px/48px var(--font-display); /* Page titles. 32px / 40px under 600px wide. */
  --text-h2: 600 30px/38px var(--font-display); /* Section heads. 26px / 34px under 600px wide. */
  --text-h3: 600 22px/30px var(--font-display); /* Card titles, step titles, the track title in the player. */
  --text-stat: 500 44px/48px var(--font-display); /* The big number in stat tiles. Set with tabular figures. */
  --text-body-lg: 400 18px/28px var(--font-sans); /* Intro paragraphs under a display or h1 line. */
  --text-body: 400 16px/26px var(--font-sans); /* Default copy everywhere, including phones. Never smaller for running text. */
  --text-body-strong: 700 16px/26px var(--font-sans); /* Emphasis inside body copy and button labels. */
  --text-small: 500 14px/22px var(--font-sans); /* Captions, helper text under fields, table cells on dense screens. */
  --text-label: 700 12px/16px var(--font-sans); /* Eyebrows above headings, pill text, table headers. Uppercase. Use sparingly: one eyebrow per section at most. */
  --text-readout: 600 14px/20px var(--font-sans); /* Player time, file durations, LUFS and dB values. Turn on tabular figures (font-variant-numeric: tabular-nums) so numbers do not jitter. */
}
.display {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 60px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.h1 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.h2 {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.h3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: 0;
}
.stat {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 48px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.readout {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}

body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }

/* hover, focus and details rules from the designs */
a{color:#b49aff}a:hover{color:#f3f0f9}
.dm-btn{transition:background-color 150ms ease-out,border-color 150ms ease-out}
.dm-btn-primary:hover{background:#5f2bcc !important}
.dm-btn-quiet:hover{border-color:#b49aff !important}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #b49aff;outline-offset:2px}
.dm-nav a{color:#a49db6;text-decoration:none}.dm-nav a:hover{color:#f3f0f9}
.dm-foot a{color:#a49db6;text-decoration:none}.dm-foot a:hover{color:#f3f0f9}
summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #b49aff;outline-offset:2px}
input::placeholder,textarea::placeholder{color:#a49db6}
a:focus-visible{outline:2px solid #b49aff;outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #b49aff;outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #b49aff;outline-offset:2px}
.dm-toc a{color:#a49db6;text-decoration:none}.dm-toc a:hover{color:#f3f0f9}