/* ==========================================================================
   ProofScope — Base Design Tokens
   Brand colors sampled from the real ProofScope app icon:
   Red  #F20202 (logo red) / Black #000000 (shield) / White (outline)
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@700,800,500&f[]=satoshi@400,500,700,900&display=swap');

:root,
[data-theme='light'] {
  /* Surfaces */
  --color-bg: #FCFBFA;
  --color-surface: #FFFFFF;
  --color-surface-2: #F5F3F1;
  --color-surface-offset: #EFEDEB;
  --color-border: #E4E0DC;
  --color-border-strong: #D2CDC8;

  /* Text */
  --color-text: #14100F;
  --color-text-muted: #5C5652;
  --color-text-faint: #948D87;
  --color-text-on-dark: #FCFBFA;

  /* Brand */
  --color-primary: #DE1B22;
  --color-primary-hover: #B8151B;
  --color-primary-active: #970F15;
  --color-primary-highlight: #FBE1E1;
  --color-brand-red: #F20202;
  --color-ink: #0A0908;
  --color-ink-2: #17130F;

  /* Feedback */
  --color-success: #1E7A46;
  --color-success-bg: #E4F4EA;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(10, 9, 8, 0.06);
  --shadow-md: 0 4px 16px rgba(10, 9, 8, 0.08);
  --shadow-lg: 0 16px 48px rgba(10, 9, 8, 0.14);
  --shadow-red: 0 8px 24px rgba(222, 27, 34, 0.25);

  color-scheme: light;
}

[data-theme='dark'] {
  --color-bg: #0A0908;
  --color-surface: #151210;
  --color-surface-2: #1C1815;
  --color-surface-offset: #221D19;
  --color-border: #322A25;
  --color-border-strong: #453A33;

  --color-text: #F7F4F1;
  --color-text-muted: #B3ABA4;
  --color-text-faint: #756B64;
  --color-text-on-dark: #F7F4F1;

  --color-primary: #FF3F42;
  --color-primary-hover: #FF5D5F;
  --color-primary-active: #E22429;
  --color-primary-highlight: #3A1414;
  --color-brand-red: #FF2A2A;
  --color-ink: #050403;
  --color-ink-2: #0F0C0A;

  --color-success: #4ADE80;
  --color-success-bg: #10241A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-red: 0 8px 28px rgba(255, 63, 66, 0.3);

  color-scheme: dark;
}

/* Type scale */
:root {
  --font-display: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  --font-body: 'Satoshi', system-ui, -apple-system, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.5rem;
  --text-hero: clamp(2.75rem, 5.5vw, 4.5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --container-max: 1180px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}