/*
 * Legalbricks.io design tokens.
 * Palette sampled from the stacked-brick logo (ink navy, gold, slate) and tuned
 * for WCAG AA. Components reference roles, never raw hex.
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --lb-ink-950: #0E1828;
  --lb-ink-900: #16243B;   /* core: ink navy — wordmark, dark bands */
  --lb-ink-800: #1B2D47;
  --lb-ink-700: #2E4A6E;   /* core: navy brick */
  --lb-ink-500: #4F6B90;
  --lb-ink-200: #C9D3E0;
  --lb-ink-100: #E6EBF2;
  --lb-ink-50:  #F4F6F9;

  --lb-gold-700: #7D5F17;  /* gold as text on light surfaces (5.6:1) */
  --lb-gold-600: #A8862C;
  --lb-gold-500: #C39F3F;  /* core: gold brick */
  --lb-gold-300: #E2C77E;
  --lb-gold-100: #F7EFD9;
  --lb-gold-50:  #FCF8EE;

  --lb-slate-700: #4B545E;
  --lb-slate-600: #5F6873; /* supporting text (5.8:1 on white) */
  --lb-slate-500: #69727C; /* slate brick */
  --lb-slate-300: #B7BDC4;
  --lb-slate-200: #DDE1E6;
  --lb-slate-100: #EEF0F3;
  --lb-white: #FFFFFF;

  /* Semantic */
  --lb-success-700: #1F6B4A; --lb-success-100: #E3F2EA;
  --lb-warning-700: #8A5A00; --lb-warning-100: #FBF0D9;
  --lb-danger-700:  #A3262E; --lb-danger-100:  #FBE6E7;

  /* Roles */
  --lb-bg: var(--lb-white);
  --lb-bg-subtle: var(--lb-ink-50);
  --lb-bg-warm: var(--lb-gold-50);
  --lb-surface: var(--lb-white);
  --lb-border: var(--lb-slate-200);
  --lb-border-strong: var(--lb-slate-300);
  --lb-border-control: #858C95;
  --lb-text: var(--lb-ink-900);
  --lb-text-body: #2B3646;
  --lb-text-muted: var(--lb-slate-600);
  --lb-accent-text: var(--lb-gold-700);
  --lb-action: var(--lb-ink-900);
  --lb-action-hover: var(--lb-ink-700);
  --lb-action-text: var(--lb-white);
  --lb-link: var(--lb-ink-700);
  --lb-focus-ring: 0 0 0 3px var(--lb-white), 0 0 0 5px var(--lb-ink-500);

  --lb-inverse-bg: var(--lb-ink-900);
  --lb-inverse-bg-deep: var(--lb-ink-950);
  --lb-inverse-text: var(--lb-white);
  --lb-inverse-text-muted: #B9C4D3;
  --lb-inverse-border: rgba(255, 255, 255, 0.14);
  --lb-inverse-focus-ring: 0 0 0 3px var(--lb-ink-900), 0 0 0 5px var(--lb-gold-300);

  /* Typography */
  --lb-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lb-size-display: clamp(2.375rem, 1.55rem + 3.3vw, 3.75rem); /* 38–60 */
  --lb-size-h1: clamp(2.125rem, 1.6rem + 2.1vw, 3.125rem);      /* 34–50 */
  --lb-size-h2: clamp(1.75rem, 1.4rem + 1.3vw, 2.375rem);       /* 28–38 */
  --lb-size-h3: 1.25rem;
  --lb-size-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --lb-size-body: 1rem;
  --lb-size-small: 0.875rem;
  --lb-size-label: 0.8125rem;
  --lb-leading-tight: 1.12;
  --lb-leading-snug: 1.3;
  --lb-leading-body: 1.65;

  /* Spacing — 8 px grid */
  --lb-space-1: 4px;  --lb-space-2: 8px;   --lb-space-3: 12px; --lb-space-4: 16px;
  --lb-space-5: 24px; --lb-space-6: 32px;  --lb-space-7: 48px; --lb-space-8: 64px;
  --lb-space-9: 96px; --lb-space-10: 128px;
  --lb-section: clamp(64px, 5vw + 40px, 120px);

  /* Shape and depth */
  --lb-radius-sm: 6px;
  --lb-radius: 10px;
  --lb-radius-lg: 16px;
  --lb-radius-xl: 24px;
  --lb-radius-pill: 999px;
  --lb-shadow-sm: 0 1px 2px rgba(22, 36, 59, 0.06);
  --lb-shadow: 0 1px 2px rgba(22, 36, 59, 0.05), 0 8px 24px -12px rgba(22, 36, 59, 0.18);
  --lb-shadow-lg: 0 2px 4px rgba(22, 36, 59, 0.04), 0 24px 56px -24px rgba(22, 36, 59, 0.32);

  /* Layout */
  --lb-container: 1200px;
  --lb-container-narrow: 760px;
  --lb-gutter: clamp(20px, 4vw, 40px);
  --lb-header-height: 72px;

  /* Motion */
  --lb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lb-duration: 180ms;
}