/* Fastpitch Rules — Design Tokens */

@font-face {
  font-family: 'Inter';
  src: url("/assets/InterVariable-bf35adcd.ttf") format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/InterVariable-Italic-d986bf11.ttf") format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/JetBrainsMono-Regular-8b44e3da.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/JetBrainsMono-Medium-8a32ca45.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/JetBrainsMono-SemiBold-64d82b82.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/JetBrainsMono-Bold-838e3cbe.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Navy — primary brand */
  --navy-50:  #f1f4f9;
  --navy-100: #dde4ef;
  --navy-200: #b7c5da;
  --navy-300: #8aa0bf;
  --navy-400: #5b78a1;
  --navy-500: #3a5783;
  --navy-600: #2a4269;
  --navy-700: #1f3252;
  --navy-800: #15233b;
  --navy-900: #0d172a;

  /* Clay — accent */
  --clay-50:  #fbf3ee;
  --clay-100: #f4ddcd;
  --clay-200: #e8bda1;
  --clay-300: #d99971;
  --clay-400: #c87a4a;
  --clay-500: #b45f30;
  --clay-600: #934826;
  --clay-700: #6f3620;
  --clay-800: #4d271a;

  /* Neutrals — warm */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafaf8;
  --neutral-100: #f4f3ef;
  --neutral-200: #e7e5df;
  --neutral-300: #d4d1c8;
  --neutral-400: #a8a499;
  --neutral-500: #78746a;
  --neutral-600: #54514a;
  --neutral-700: #383631;
  --neutral-800: #23221f;
  --neutral-900: #141413;

  /* Semantic — rule statuses */
  --green-50:  #ecf7ee;
  --green-500: #2f8f4a;
  --green-700: #1f6533;
  --amber-50:  #fdf5e3;
  --amber-500: #c98a14;
  --amber-700: #8c5f08;
  --red-50:    #fcecea;
  --red-500:   #c43d2c;
  --red-700:   #8a2418;
  --blue-50:   #e9f2fb;
  --blue-500:  #2c6bb0;
  --blue-700:  #1c4a80;

  /* Semantic tokens */
  --fg-1: var(--neutral-900);
  --fg-2: var(--neutral-700);
  --fg-3: var(--neutral-500);
  --fg-4: var(--neutral-400);
  --fg-on-brand: var(--neutral-0);
  --fg-link: var(--navy-700);

  --bg-app:         var(--neutral-50);
  --bg-surface:     var(--neutral-0);
  --bg-sunken:      var(--neutral-100);
  --bg-brand:       var(--navy-800);
  --bg-brand-hover: var(--navy-700);
  --bg-accent:        var(--clay-500);
  /* Derived light/dark variants so a league's --bg-accent override (a shade
     of primary_color — see League#css_token_overrides) automatically gets a
     matching subtle background and a readable text color, without
     hand-picking a tint per hex value. */
  --bg-accent-subtle: color-mix(in srgb, var(--bg-accent) 10%, white);
  --fg-accent:         color-mix(in srgb, var(--bg-accent) 82%, black);

  --border-1:     var(--neutral-200);
  --border-2:     var(--neutral-300);
  --border-focus: var(--navy-500);

  --status-legal-bg:       var(--green-50);
  --status-legal-fg:       var(--green-700);
  --status-conditional-bg: var(--amber-50);
  --status-conditional-fg: var(--amber-700);
  --status-illegal-bg:     var(--red-50);
  --status-illegal-fg:     var(--red-700);
  --status-info-bg:        var(--blue-50);
  --status-info-fg:        var(--blue-700);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  44px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* Shadows — minimal, warm-tinted */
  --shadow-1:      0 1px 2px rgba(20, 20, 19, 0.06);
  --shadow-2:      0 2px 6px rgba(20, 20, 19, 0.08), 0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-3:      0 8px 24px rgba(20, 20, 19, 0.12), 0 2px 6px rgba(20, 20, 19, 0.06);
  --shadow-inset:  inset 0 1px 2px rgba(20, 20, 19, 0.05);

  --hit: 44px;
}

/* Typography classes */
.t-display {
  font-family: var(--font-sans);
  font-weight: var(--weight-black);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.t-meta {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--fg-3);
}
.t-overline {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-cite {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.t-cite-strong {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--navy-700);
}