/* tapcontact design tokens — Monoline citron */
:root {
  /* neutrals (light) */
  --tc-bg: #FFFFFF;
  --tc-surface: #F6F6F5;
  --tc-surface-2: #F1F1F0;
  --tc-border: #E4E4E2;
  --tc-border-strong: #C9CBCE;
  --tc-text: #17181A;        /* 17.7:1 on bg */
  --tc-text-2: #55585E;      /* 7.0:1 on bg */
  --tc-text-3: #85909B;      /* large text / meta only */
  /* accent — never body text */
  --tc-accent: #C6D92E;
  --tc-accent-ink: #17181A;  /* text ON accent, 10.9:1 */
  --tc-accent-dim: #4A521B;  /* accent borders on dark */
  /* semantic (AA on bg) */
  --tc-success: #2E7D4F;
  --tc-warning: #8A620B;
  --tc-danger: #C13A3A;
  --tc-info: #3565A8;
  /* type — Archivo variable (wdth 62..125, wght 400..800) */
  --tc-font: 'Archivo', system-ui, sans-serif;
  --tc-font-mono: 'IBM Plex Mono', monospace;
  --tc-display-stretch: 78%;   /* marketing display */
  --tc-logo-stretch: 108%;     /* wordmark only */
  --tc-text-xs: 12px; --tc-text-sm: 13px; --tc-text-base: 15px;
  --tc-text-lg: 18px; --tc-text-xl: 24px; --tc-text-2xl: 34px;
  --tc-text-3xl: 48px; --tc-text-4xl: 64px;
  --tc-leading-tight: 1.05; --tc-leading-ui: 1.4; --tc-leading-doc: 1.6;
  --tc-tracking-display: -0.01em; --tc-tracking-logo: -0.03em; --tc-tracking-caps: 0.08em;
  /* spacing */
  --tc-space-1: 4px; --tc-space-2: 8px; --tc-space-3: 12px; --tc-space-4: 16px;
  --tc-space-5: 24px; --tc-space-6: 32px; --tc-space-7: 48px; --tc-space-8: 64px;
  /* radii — square by default; radius is the exception */
  --tc-radius-0: 0; --tc-radius-sm: 2px; --tc-radius-md: 6px; --tc-radius-pill: 999px;
  /* shadows — flat system, shadows only for overlays */
  --tc-shadow-overlay: 0 8px 32px rgba(23,24,26,.16);
  --tc-shadow-card: 0 1px 2px rgba(23,24,26,.06);
}
[data-theme="dark"] {
  --tc-bg: #17181A;
  --tc-surface: #212226;
  --tc-surface-2: #26272C;
  --tc-border: #33353A;
  --tc-border-strong: #4A4D53;
  --tc-text: #EDEDEB;        /* 14.9:1 */
  --tc-text-2: #A6A8AC;      /* 6.9:1 */
  --tc-text-3: #6E7076;
  --tc-accent: #C6D92E;      /* 10.9:1 on bg */
  --tc-accent-ink: #17181A;
  --tc-success: #5DBA85;
  --tc-warning: #D9A63C;
  --tc-danger: #E06C6C;
  --tc-info: #7AA7E0;
  --tc-shadow-overlay: 0 8px 32px rgba(0,0,0,.5);
  --tc-shadow-card: none;
}

/* Tailwind v4 @theme mapping */
@theme {
  --color-bg: var(--tc-bg);
  --color-surface: var(--tc-surface);
  --color-surface-2: var(--tc-surface-2);
  --color-border: var(--tc-border);
  --color-ink: var(--tc-text);
  --color-ink-2: var(--tc-text-2);
  --color-accent: var(--tc-accent);
  --color-success: var(--tc-success);
  --color-warning: var(--tc-warning);
  --color-danger: var(--tc-danger);
  --color-info: var(--tc-info);
  --font-sans: var(--tc-font);
  --font-mono: var(--tc-font-mono);
  --radius-sm: var(--tc-radius-sm);
  --radius-md: var(--tc-radius-md);
}

/* ── Additions from a11y/integration review (2026-08-14) ──
   Input borders: --tc-border (1.27:1) and --tc-border-strong (1.63:1) are fine
   as decorative separators but FAIL WCAG 1.4.11 (3:1) when the border is the
   only affordance of a form control. Use this on inputs/selects/checkboxes: */
:root { --tc-border-input: #85909B; }              /* 3.25:1 on light bg */
[data-theme="dark"] { --tc-border-input: #6E7076; } /* 3.59:1 on dark bg */
/* Citron on LIGHT surfaces is 1.57:1 — never rely on it as the only
   boundary/indicator on white; pair with --tc-accent-ink text or a graphite
   border, or use --tc-accent-dim. On dark surfaces citron carries itself. */

/* Fallback definitions for Divi Global Color variables (gcid-tc-*): Divi emits
   these for colors it knows are "used", but programmatic content can reference
   them before the VB registers usage. Same values as the VB Global Colors —
   if the team edits a Global Color, Divi's own definition wins at runtime. */
:root {
  --gcid-tc-ink: #17181A; --gcid-tc-ink-2: #55585E; --gcid-tc-meta: #6B6862;
  --gcid-tc-citron: #C6D92E; --gcid-tc-white: #FFFFFF; --gcid-tc-surface: #F6F6F5;
  --gcid-tc-surface-2: #F1F1F0; --gcid-tc-border: #E4E4E2; --gcid-tc-dark-ink: #EDEDEB;
  --gcid-tc-dark-ink-2: #A6A8AC; --gcid-tc-dark-border: #33353A;
}