@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow:wght@400;500;600;700&display=swap');

/* tokens/colors.css */
:root {
  /* Base palette — sampled from the JP226 logo files */
  --red-700: #A81F0C;
  --red-600: #DB2B10;   /* primary brand red */
  --red-500: #E8462C;
  --red-100: #FCE4DE;

  --ink-950: #0D0A0E;   /* near-black, warm */
  --ink-800: #211D22;
  --ink-600: #4A444B;
  --ink-400: #7A737A;

  --paper-50: #FDFCFA;  /* warm white */
  --paper-200: #F1EEE9;
  --paper-400: #DAD4CC;

  --amber-600: #C9930A;
  --amber-500: #EFB712; /* charity / 4WD accent, from Fast & the Fossilized ring */
  --amber-100: #FBEBC0;

  /* Semantic aliases */
  --bg-page: var(--paper-50);
  --bg-surface: #FFFFFF;
  --bg-inverse: var(--ink-950);
  --text-primary: var(--ink-950);
  --text-secondary: var(--ink-600);
  --text-on-inverse: var(--paper-50);
  --text-on-red: var(--paper-50);

  --brand-primary: var(--red-600);
  --brand-primary-hover: var(--red-700);
  --brand-accent-charity: var(--amber-500);

  --border-default: var(--paper-400);
  --border-strong: var(--ink-950);

  --focus-ring: var(--red-600);
}

/* tokens/typography.css */


:root {
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;

  --text-display-xl: 700 clamp(2.75rem, 6vw, 5rem)/0.98 var(--font-display);
  --text-display-lg: 700 clamp(2rem, 4vw, 3.25rem)/1.0 var(--font-display);
  --text-display-md: 700 1.5rem/1.05 var(--font-display);

  --text-h1: 600 2rem/1.15 var(--font-body);
  --text-h2: 600 1.5rem/1.2 var(--font-body);
  --text-h3: 600 1.125rem/1.3 var(--font-body);

  --text-body-lg: 400 1.125rem/1.55 var(--font-body);
  --text-body: 400 1rem/1.55 var(--font-body);
  --text-body-sm: 400 0.875rem/1.5 var(--font-body);
  --text-caption: 500 0.75rem/1.4 var(--font-body);

  --tracking-display: 0.01em;
  --tracking-caps: 0.08em;
}

/* tokens/spacing.css */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13, 10, 14, 0.08);
  --shadow-md: 0 4px 12px rgba(13, 10, 14, 0.12);
  --shadow-lg: 0 12px 32px rgba(13, 10, 14, 0.18);

  --container-max: 1200px;
}

/* styles.css */
500;600;700&display=swap');

/* ---- responsive (site build) ---- */
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}
a{color:var(--brand-primary)} a:hover{color:var(--brand-primary-hover)}
@media (max-width: 960px){
  [style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  header{flex-wrap:wrap;gap:12px;padding:14px 20px!important}
  header nav{flex-wrap:wrap;gap:14px 18px!important}
}
@media (max-width: 620px){
  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  #root section [style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  section{padding-left:20px!important;padding-right:20px!important}
  section[style*="margin: 0px 40px"]{margin-left:16px!important;margin-right:16px!important;flex-wrap:wrap}
  section[style*="display: flex"]{flex-wrap:wrap}
  footer{padding-left:20px!important;padding-right:20px!important}
  footer [style*="justify-content: space-between"]{flex-direction:column;gap:6px}
  header nav{font-size:0.9rem!important}
}