/* Design tokens — "Sakin ve rafine". Values verbatim from the design system; components live in app.css. */

/* Geist by Vercel, SIL Open Font License 1.1 (fonts/OFL.txt). Self-hosted, no CDN. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Geist-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Geist-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Geist-SemiBold.woff2') format('woff2');
}

:root {
  /* Colour */
  --bg: #F6F5F2;
  --surface: #FFFFFF;
  --ink: #0E1116;
  --ink-2: #5B616E;
  --line: rgba(14, 17, 22, 0.08);
  --accent: #1F4FFF;
  --accent-ink: #FFFFFF;
  --positive: #0F8A4B;
  --positive-tint: #E6F4EC;
  --negative: #C62F2F;
  --negative-tint: #FBE9E9;
  --warn-ink: #6B4E00;
  --warn-tint: #FFF4D1;
  --neutral-tint: #EEF0F3;

  /* Type */
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* Shape and space (8px grid) */
  --gutter: 20px;
  --row-min: 56px;
  --touch: 48px;
  --radius-scoreboard: 24px;
  --radius-card: 20px;
  --radius-dock: 28px;
  --radius-tile: 12px;
  --radius-button-lg: 22px;
  --radius-sheet: 28px;
  --radius-full: 9999px;

  /* Score figures: 600, at least 56px, tight tracking, tabular numerals */
  --score-size: 64px;
  --score-weight: 600;
  --score-tracking: -0.03em;

  /* Dock: 64px buttons inside 8px padding */
  --dock-button: 64px;
  --dock-height: calc(var(--dock-button) + 16px);

  /* Depth: the soft shadow on cards; the float shadow on the dock and sheets, as in the mockups */
  --shadow: 0 8px 24px rgba(14, 17, 22, 0.06);
  --shadow-float: 0 12px 32px rgba(14, 17, 22, 0.10);
  --backdrop: rgba(14, 17, 22, 0.45);

  /* The record button while held: the accent, deepened */
  --accent-deep: #1336CC;
  --accent-soft: rgba(31, 79, 255, 0.10);
  --accent-wash: rgba(31, 79, 255, 0.05);
  --ink-15: rgba(14, 17, 22, 0.15);
  --ink-5: rgba(14, 17, 22, 0.05);
  --ink-20: rgba(14, 17, 22, 0.2);
  --warn-wash: rgba(255, 244, 209, 0.6);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-enter: 200ms;
  --dur-pulse: 1.2s;

  /* Layout */
  --column: 480px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-enter: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}