/* SharpCube design tokens. Custom properties only, no rules here. */
/* Full documentation of this scale lives in DESIGN.md at the project root. */

:root {
  /* Colour */
  --paper: #F7F8F6;
  --ink: #14161A;
  --steel: #5A6270;
  --hairline: #E2E5E1;
  --hairline-on-ink: #2A2E35;
  --cobalt: #2B49E8;
  --cobalt-hover: #1F37C4;
  --paper-on-ink: #F7F8F6;
  --steel-on-ink: #8A93A5;
  --mist: #E7EDF4;
  --cobalt-tint: rgba(43, 73, 232, 0.08);
  --shadow-ink: rgba(20, 22, 26, 0.12);
  /* verified 8.84:1 against --ink, comfortably clears 4.5:1; cobalt itself
     is never used as text/accent on ink (2.78:1, fails even 3:1) */
  --cobalt-on-ink: #9DB2FF;

  /* Font families */
  --font-display: "Clash Display", "Arial Narrow", sans-serif;
  --font-body: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* Type scale: size / line-height / letter-spacing / weight recorded together in DESIGN.md */
  --text-display-xl: 600 clamp(2.75rem, 2.1rem + 3vw, 4.5rem) / 1.05 var(--font-display);
  --text-display-lg: 600 clamp(2.25rem, 1.9rem + 1.6vw, 3.5rem) / 1.08 var(--font-display);
  --text-display-md: 600 clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem) / 1.1 var(--font-display);
  --text-display-sm: 500 1.75rem/1.15 var(--font-display);

  --tracking-display-xl: -0.02em;
  --tracking-display-lg: -0.015em;
  --tracking-display-md: -0.01em;
  --tracking-display-sm: -0.005em;

  --text-body-lg: 400 1.25rem/1.5 var(--font-body);
  --text-body: 400 1.0625rem/1.6 var(--font-body);
  --text-body-sm: 400 0.9375rem/1.5 var(--font-body);
  --text-caption: 400 0.8125rem/1.4 var(--font-body);
  --text-button: 500 1rem/1.2 var(--font-body);

  --text-mono: 400 0.8125rem/1.4 var(--font-mono);
  --text-mono-sm: 400 0.6875rem/1.4 var(--font-mono);
  --tracking-mono: 0.02em;

  /* Spacing scale, 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --content-max: 1200px;
  --content-pad: var(--space-6);

  /* Chamfer sizes, per component scale */
  --chamfer-sm: 10px;
  --chamfer-md: 14px;
  --chamfer-lg: 16px;
  --chamfer-xl: 28px;

  /* Motion */
  --ease-out-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
  --duration-load: 0.6s;
  --duration-reveal: 200ms;
  --duration-hover: 150ms;
  --duration-frame: 300ms;
  --duration-flip: 375ms;

  /* Focus */
  --focus-ring: 2px solid var(--cobalt);
  --focus-ring-offset: 2px;
}