/* Legal.io design system — tokens.
   Warm paper background, cobalt accent, Lay Grotesk display + Inter body. */

@font-face {
  font-family: "Lay Grotesk";
  src: url("/assets/lay-grotesk-legalio-medium-7d2b0c0c.otf") format("opentype"),
       url("/assets/lay-grotesk-legalio-medium-77d674f3.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/inter-latin-496a588b.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/inter-latin-ext-5a6754fc.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand */
  --navy: #050911;
  --cobalt: #0025DE;
  --cobalt-hover: #001FB8;
  --light-blue: #85A9E3;
  --periwinkle: #A8B8F0;

  /* Warm beige neutrals (paper) */
  --beige-0: #FAF9F7;
  --beige-1: #F4F2EE;
  --beige-2: #EBE8E2;
  --beige-3: #DDD8CF;
  --beige-4: #C9C3B8;
  --beige-5: #B6B0A6;

  /* Gray ramp */
  --gray-0: #F5F6F5;
  --gray-1: #E4E6E4;
  --gray-2: #C9CCC9;
  --gray-3: #A8ACA8;
  --gray-4: #878B87;
  --gray-5: #666A66;
  --gray-6: #474A47;
  --gray-7: #2C2E2C;
  --gray-8: #161816;
  --gray-9: #080908;

  --ink: var(--navy);
  --ink-muted: #4A4E58;
  --ink-faint: #8A8E98;
  --paper: var(--beige-0);
  --hairline: rgba(5, 9, 17, 0.10);

  /* Type */
  --font-display: "Lay Grotesk", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing — 8pt scale */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;

  --container: 1240px;
  --gutter: 24px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* Shadows — soft, cool, navy-tinted */
  --shadow-sm: 0 1px 2px rgba(5, 9, 17, 0.05), 0 1px 4px rgba(5, 9, 17, 0.04);
  --shadow-md: 0 6px 20px rgba(5, 9, 17, 0.08), 0 2px 6px rgba(5, 9, 17, 0.05);
  --shadow-lg: 0 24px 60px rgba(5, 9, 17, 0.14), 0 8px 24px rgba(5, 9, 17, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-slow: 360ms;
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
}