/* Spuutr Labs design tokens. Source of truth: brand/reference/*.png and /workspace/brand/spuutr-labs/STYLE.md
   Orange is the single accent: highlight ONE key word or number per view. Headlines bold, secondary text light.
   Light variant surfaces: #FFFFFF or #F2F2F2. */
/* House font: Inter (body) + Inter Display (headlines). Static files in fonts/, SIL OFL 1.1. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/woff2/Inter-Light.woff2") format("woff2"), url("fonts/ttf/Inter-Light.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/woff2/Inter-Regular.woff2") format("woff2"), url("fonts/ttf/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/woff2/Inter-Medium.woff2") format("woff2"), url("fonts/ttf/Inter-Medium.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/woff2/Inter-SemiBold.woff2") format("woff2"), url("fonts/ttf/Inter-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/woff2/Inter-Bold.woff2") format("woff2"), url("fonts/ttf/Inter-Bold.ttf") format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/woff2/InterDisplay-Regular.woff2") format("woff2"), url("fonts/ttf/InterDisplay-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/woff2/InterDisplay-Medium.woff2") format("woff2"), url("fonts/ttf/InterDisplay-Medium.ttf") format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/woff2/InterDisplay-SemiBold.woff2") format("woff2"), url("fonts/ttf/InterDisplay-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/woff2/InterDisplay-Bold.woff2") format("woff2"), url("fonts/ttf/InterDisplay-Bold.ttf") format("truetype"); }
:root {
  /* colour */
  --sp-charcoal: #0D0D0D;      /* primary dark surface, ink */
  --sp-ink-900: #0D0D0D;
  --sp-ink-800: #161616;       /* raised dark card */
  --sp-ink-700: #1F1F1F;       /* dark card border / inset */
  --sp-ink-600: #2B2B2B;
  --sp-grey-500: #6B6B6B;      /* secondary text on light */
  --sp-grey-400: #8A8A8A;      /* tertiary text, captions */
  --sp-grey-300: #B8B8B8;
  --sp-grey-200: #E4E4E4;      /* hairlines on light */
  --sp-grey-150: #ECECEC;
  --sp-grey-100: #F2F2F2;      /* light variant surface */
  --sp-grey-50:  #F5F5F5;      /* reference board background */
  --sp-white: #FFFFFF;
  --sp-orange: #FF6A00;        /* the accent */
  --sp-orange-600: #E85F00;    /* pressed */
  --sp-orange-100: #FFF0E6;    /* faint tint */
  --sp-orange-glow: rgba(255, 106, 0, 0.35);
  --sp-success: #1F9D55;       /* status dot / Running pill text only */
  --sp-success-bg: #E7F6EC;

  /* type: Inter is the single house font. The wordmark is outlined SVG (Ubuntu shapes), not a font dependency. */
  --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif; /* headlines 700/600, tight tracking */
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;                    /* body 400, secondary 300 */
  --sp-font-ui: var(--font-body);
  --sp-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --sp-weight-light: 300;
  --sp-weight-regular: 400;
  --sp-weight-medium: 500;
  --sp-weight-semibold: 600;
  --sp-weight-bold: 700;
  --sp-text-xs: 12px;   --sp-lh-xs: 16px;   /* labels, eyebrows (uppercase, tracking .12em) */
  --sp-text-sm: 14px;   --sp-lh-sm: 20px;
  --sp-text-md: 16px;   --sp-lh-md: 24px;   /* body */
  --sp-text-lg: 20px;   --sp-lh-lg: 28px;
  --sp-text-xl: 28px;   --sp-lh-xl: 34px;
  --sp-text-2xl: 40px;  --sp-lh-2xl: 46px;
  --sp-text-3xl: 56px;  --sp-lh-3xl: 60px;  /* hero headline, bold, tracking -0.03em */
  --sp-tracking-tight: -0.03em;   /* display headlines */
  --sp-tracking-snug: -0.015em;   /* titles */
  --sp-tracking-eyebrow: 0.14em;

  /* radii */
  --sp-radius-xs: 6px;
  --sp-radius-sm: 8px;    /* inputs, buttons */
  --sp-radius-md: 12px;   /* cards */
  --sp-radius-lg: 20px;   /* panels, phone cards */
  --sp-radius-xl: 28px;
  --sp-radius-icon: 14.2%; /* app icon tile: 34 / 240 */
  --sp-radius-pill: 999px;

  /* spacing (4px base) */
  --sp-space-1: 4px; --sp-space-2: 8px; --sp-space-3: 12px; --sp-space-4: 16px;
  --sp-space-5: 24px; --sp-space-6: 32px; --sp-space-7: 48px; --sp-space-8: 64px;

  /* shadows */
  --sp-shadow-xs: 0 1px 2px rgba(13, 13, 13, 0.06);
  --sp-shadow-sm: 0 1px 2px rgba(13, 13, 13, 0.04), 0 2px 8px rgba(13, 13, 13, 0.05);
  --sp-shadow-md: 0 2px 4px rgba(13, 13, 13, 0.04), 0 12px 32px rgba(13, 13, 13, 0.08);
  --sp-shadow-lg: 0 4px 12px rgba(13, 13, 13, 0.06), 0 32px 80px rgba(13, 13, 13, 0.14);
  --sp-shadow-glow: 0 0 0 1px rgba(255, 106, 0, 0.25), 0 8px 32px rgba(255, 106, 0, 0.35);
  --sp-hairline: 1px solid var(--sp-grey-200);
}