/* TapeDeck theme. Colours are the app's own (ui/theme/Tokens.kt, TapeDeck 5.0): "Graphite" for the page and
   "Paper" for the light band. As in the app, orange means record: the record button, the next-take lane and
   the logo's ▶. Nothing else on the site is orange. Layout lives in site.css, sections.css and motion.css. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Graphite (the app's dark theme, its default) */
  --bg: #121110;
  --card: #1B1A18;
  --surface: #252321;
  --surface-high: #302D2A;
  --hairline: #34312C;
  --line: rgba(242, 237, 228, .08);
  --line-2: rgba(242, 237, 228, .12);
  --line-3: rgba(242, 237, 228, .2);
  --text: #F2EDE4;
  --text-2: #A39D93;           /* 7.0:1 on --bg */
  --muted: #8E887E;            /* captions, 5.4:1 on --bg */
  --text-3: #6E6961;           /* rules and decoration only: 3.5:1 on --bg */
  --rec: #EE6526;              /* record, the next-take lane and the logo's ▶, nothing else */
  --on-rec: #12110F;
  --wave: #CFC8BC;
  --warn: #F2B33D;
  --reel-pack: #34312D;
  --reel-line: #6E6961;

  /* Paper (the app's light theme) */
  --paper: #F4EFE6;
  --paper-card: #FBF8F2;
  --paper-text: #1A1714;
  --paper-text-2: #5F5850;     /* 6.1:1 on --paper */
  --paper-line: #D9D1C3;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --r: 16px;
  --r-lg: 22px;
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* The room behind the page: warm lamp light on graphite, no colour */
  --ambient: radial-gradient(55% 40% at 82% 2%, rgba(207, 200, 188, .07), transparent 70%),
             radial-gradient(45% 35% at 4% 46%, rgba(150, 112, 80, .07), transparent 70%),
             radial-gradient(50% 40% at 92% 92%, rgba(207, 200, 188, .04), transparent 70%);
  --sky: radial-gradient(70% 55% at 50% 0%, rgba(207, 200, 188, .1), transparent 70%),
         radial-gradient(40% 40% at 50% 30%, rgba(150, 112, 80, .08), transparent 70%);

  /* Shared LD Coda footer (ldc-footer.css); text colours meet WCAG AA on the footer background */
  --ldc-footer-bg: #161513;
  --ldc-footer-border: var(--hairline);
  --ldc-footer-link: var(--text-2);
  --ldc-footer-link-h: var(--text);
  --ldc-footer-current: var(--text);
  --ldc-footer-cat: var(--muted);
  --ldc-footer-dot: var(--text-3);
  --ldc-footer-meta: var(--muted);
}