/* Trifolo Design Tokens v1 (2026-07-21)
   All pairings WCAG-verified (see styleguide). Font is self-hosted, never loaded remotely. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --tf-green-50:  #EAF6EF;
  --tf-green-100: #D3EDDF;
  --tf-green-300: #6FCE9E;
  --tf-green-600: #1E8A50;  /* logo & large graphics on white (>=3:1) */
  --tf-green-700: #166B3F;  /* interactive text, buttons on white (>=4.5:1) */
  --tf-green-800: #0F5230;

  /* Neutrals (green-biased) */
  --tf-paper:   #FBFDFC;
  --tf-surface: #FFFFFF;
  --tf-ink:     #14201A;
  --tf-muted:   #51645A;   /* >=4.5:1 on paper */
  --tf-line:    #DCE6E0;   /* decorative hairlines */
  --tf-border-input: #6E8478; /* form controls, >=3:1 on paper */

  /* Semantics (text-grade on paper, all >=4.5:1) */
  --tf-success: #166B3F;
  --tf-warn:    #8A5800;
  --tf-error:   #B3362B;
  --tf-info:    #1F639E;

  /* Type */
  --tf-font: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --tf-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Shape & rhythm */
  --tf-radius: 8px;
  --tf-radius-lg: 12px;
  --tf-space: 8px; /* base unit, scale in multiples */
  --tf-focus: 0 0 0 3px color-mix(in srgb, var(--tf-green-600) 35%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tf-green-50:  #12251B;
    --tf-green-100: #173324;
    --tf-green-300: #6FCE9E; /* interactive text & logo on dark (>=4.5:1) */
    --tf-green-600: #2FA463;
    --tf-green-700: #6FCE9E;
    --tf-green-800: #A5E3C4;
    --tf-paper:   #101613;
    --tf-surface: #17201B;
    --tf-ink:     #E7EFEA;
    --tf-muted:   #9DB5A9;
    --tf-line:    #263129;
    --tf-border-input: #5E7466;
    --tf-success: #6FCE9E;
    --tf-warn:    #E5B567;
    --tf-error:   #F2867B;
    --tf-info:    #7FB4E8;
  }
}

:root[data-theme="light"] {
  --tf-green-50: #EAF6EF; --tf-green-100: #D3EDDF; --tf-green-300: #6FCE9E;
  --tf-green-600: #1E8A50; --tf-green-700: #166B3F; --tf-green-800: #0F5230;
  --tf-paper: #FBFDFC; --tf-surface: #FFFFFF; --tf-ink: #14201A; --tf-muted: #51645A;
  --tf-line: #DCE6E0; --tf-border-input: #6E8478;
  --tf-success: #166B3F; --tf-warn: #8A5800; --tf-error: #B3362B; --tf-info: #1F639E;
}

:root[data-theme="dark"] {
  --tf-green-50: #12251B; --tf-green-100: #173324; --tf-green-300: #6FCE9E;
  --tf-green-600: #2FA463; --tf-green-700: #6FCE9E; --tf-green-800: #A5E3C4;
  --tf-paper: #101613; --tf-surface: #17201B; --tf-ink: #E7EFEA; --tf-muted: #9DB5A9;
  --tf-line: #263129; --tf-border-input: #5E7466;
  --tf-success: #6FCE9E; --tf-warn: #E5B567; --tf-error: #F2867B; --tf-info: #7FB4E8;
}