/* JanaDrive brand layer over Broadsheet — brand green #002F1B, modern sans type,
   softer radii. Loaded after broadsheet.css; only retunes tokens + component chrome. */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Golos+Text:wght@400;500;600&display=swap');

:root {
  --color-bg: #FAFAF8;
  --color-surface: #F0F1ED;
  --color-text: #14211B;
  --color-accent: #002F1B;
  --color-accent-2: #2F8F5B;
  --color-divider: color-mix(in srgb, #14211B 12%, transparent);

  --color-accent-100: #EAF4EE;
  --color-accent-200: #D2E7DB;
  --color-accent-300: #A8CFBA;
  --color-accent-400: #74AF92;
  --color-accent-500: #3F8B65;
  --color-accent-600: #12432C;
  --color-accent-700: #0A3320;
  --color-accent-800: #062616;
  --color-accent-900: #001F12;

  --color-accent-2-100: #EEF7F1;
  --color-accent-2-200: #DAEDE1;
  --color-accent-2-300: #B7DCC6;
  --color-accent-2-400: #8AC5A5;
  --color-accent-2-500: #58A67F;
  --color-accent-2-600: #35855E;
  --color-accent-2-700: #226A48;
  --color-accent-2-800: #164D33;
  --color-accent-2-900: #0D3021;

  --font-heading: "Onest", system-ui, -apple-system, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Golos Text", "Onest", system-ui, -apple-system, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #14211B 8%, transparent);
  --shadow-md: 0 6px 18px color-mix(in srgb, #14211B 10%, transparent);
  --shadow-lg: 0 18px 44px color-mix(in srgb, #14211B 14%, transparent);
}

body { font-family: var(--font-body); font-size: 16px; letter-spacing: -0.004em; }
h1, h2, h3, h4 { letter-spacing: -0.035em; line-height: 1.05; }
h5 { letter-spacing: -0.02em; }
h6 { letter-spacing: 0.09em; font-weight: 600; }

a { color: var(--color-accent); text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent-500); }

.btn {
  border-radius: 999px; font-family: var(--font-heading); font-weight: 600;
  letter-spacing: -0.01em; font-size: 15px;
}
.btn-primary { background: var(--color-accent); color: #FBFDFB; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-900); }
.btn-secondary { border-color: color-mix(in srgb, var(--color-text) 24%, transparent); }
.btn-secondary:hover { background: var(--color-accent-100); border-color: var(--color-accent-400); }
.btn-ghost { color: var(--color-accent); }
.btn-ghost:hover { background: var(--color-accent-100); }

.seg { border-radius: 999px; padding: 2px; border-color: color-mix(in srgb, var(--color-text) 16%, transparent); }
.seg-opt {
  border-radius: 999px; font-family: var(--font-heading); font-weight: 500;
  font-size: 12.5px; letter-spacing: 0.02em; padding: 5px 13px;
}
.seg-opt + .seg-opt { border-left: none; }
.seg-opt:has(input:checked) { background: var(--color-accent); color: #FBFDFB; }

.tag { border-radius: 999px; font-family: var(--font-heading); font-weight: 500; }
.input { border-radius: var(--radius-md); }

.table th { font-family: var(--font-heading); }
.table td { border-bottom-color: color-mix(in srgb, var(--color-text) 9%, transparent); }
.table tbody tr:hover { background: transparent; }