/* Design tokens — the ONLY place colours, fonts, radii and shadows are defined.
   The art director fills in every value for this app's direction. Keep every variable name.
   Light values go in :root; dark values in BOTH dark blocks (keep them identical). */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600&display=swap");

:root {
  color-scheme: light dark;

  /* colour */
  --bg: #FFFFFF;            /* page background */
  --surface: #F2F3F5;       /* cards, sheets, inputs */
  --surface-2: #E4E6EA;     /* subtle fills: hover rows, chips, skeletons */
  --text: #101216;          /* primary text, 7:1 on --bg if possible, never below 4.5:1 */
  --text-muted: #4D535E;    /* secondary text, at least 4.5:1 on --bg */
  --border: #C3C8D0;        /* hairlines and outlines */
  --accent: #D8F21C;        /* the one accent — volt; a FILL only, never text on light */
  --accent-contrast: #101216; /* text/icon colour on top of --accent */
  --danger: #C8261A;
  --success: #12733A;
  --focus: #1F5BFF;         /* focus ring colour, visible on --bg and --surface */

  /* type */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --weight-display: 800;
  --tracking-display: -0.01em;
  --case-label: uppercase;        /* none | uppercase */
  --tracking-label: 0.08em;
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-md: 1rem;   --text-lg: 1.25rem;
  --text-xl: 1.75rem;  --text-2xl: 3rem;  --text-3xl: 5rem;
  --leading: 1.45;

  /* space (4px scale) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;
  --container: 44rem;

  /* shape */
  --radius-s: 2px; --radius-m: 4px; --radius-l: 6px;
  --border-w: 2px;
  --shadow: none;            /* resting elevation for cards/sheets */
  --shadow-press: inset 0 3px 0 rgba(16, 18, 22, 0.28);      /* buttons while pressed */

  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101216; --surface: #1A1D23; --surface-2: #262A32; --text: #F4F5F7; --text-muted: #A1A7B1; --border: #363B46;
    --accent: #E2FF2E; --accent-contrast: #101216; --danger: #FF5C4D; --success: #3DDC84; --focus: #E2FF2E; --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #101216; --surface: #1A1D23; --surface-2: #262A32; --text: #F4F5F7; --text-muted: #A1A7B1; --border: #363B46;
  --accent: #E2FF2E; --accent-contrast: #101216; --danger: #FF5C4D; --success: #3DDC84; --focus: #E2FF2E; --shadow: none;
}