/* Acculead v64 design tokens. Three layers, acc- namespace.
   1) reference: raw values. Only this layer holds hex.
   2) system: roles (surface, text, action, border). Built from reference.
   3) component: per-component knobs. Built from system.
   Components read component or system tokens only, never hex. */

@font-face{font-family:"Inter Var";src:url(fonts/inter-var-sub.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(fonts/dmserif-sub.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(fonts/dmserif-italic-sub.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* ── 1. REFERENCE ─────────────────────────────── */
  /* cream: #F5EFE6 stays the brand paper; a lighter raised tint and a deeper sunk tint are added */
  --acc-ref-cream-50:#FCFAF6;
  --acc-ref-cream-100:#F5EFE6;
  --acc-ref-cream-200:#EDE4D5;
  --acc-ref-cream-300:#D9CDB6;
  /* navy: #0E1A30 stays ink; two steps added for inverse surfaces and secondary text */
  --acc-ref-navy-950:#0A1324;
  --acc-ref-navy-900:#0E1A30;
  --acc-ref-navy-800:#1A2944;
  --acc-ref-navy-600:#4F596C; /* 6.17:1 on cream-100 */
  --acc-ref-navy-300:#B9C3D4; /* 10.6:1 on navy-900 */
  /* rust: #E8863A stays the action fill (navy text on it 6.54:1). It is 2.32:1 on cream, so never text or a lone border on cream. */
  --acc-ref-rust-100:#FBE7D6;
  --acc-ref-rust-500:#E8863A;
  --acc-ref-rust-600:#D9752A;
  --acc-ref-rust-800:#9A4A14; /* rust as text on cream: 5.46:1 */
  --acc-ref-rust-300:#F2A35F; /* rust as text on navy: 8.42:1 */
  --acc-ref-white:#FFFFFF;
  --acc-ref-red-700:#A32020;

  --acc-ref-font-sans:"Inter Var",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --acc-ref-font-serif:"DM Serif Display",ui-serif,Georgia,"Times New Roman",serif;

  /* 4px base spacing */
  --acc-ref-space-1:4px;--acc-ref-space-2:8px;--acc-ref-space-3:12px;--acc-ref-space-4:16px;
  --acc-ref-space-5:24px;--acc-ref-space-6:32px;--acc-ref-space-7:48px;--acc-ref-space-8:64px;
  --acc-ref-space-9:96px;--acc-ref-space-10:128px;

  /* three radii, replacing seven */
  --acc-ref-radius-s:8px;--acc-ref-radius-m:16px;--acc-ref-radius-l:24px;--acc-ref-radius-pill:999px;

  --acc-ref-ease-out:cubic-bezier(.2,.8,.2,1);
  --acc-ref-dur-fast:120ms;--acc-ref-dur-base:200ms;--acc-ref-dur-slow:320ms;

  /* ── 2. SYSTEM ───────────────────────────────── */
  --acc-color-surface-default:var(--acc-ref-cream-100);
  --acc-color-surface-raised:var(--acc-ref-cream-50);
  --acc-color-surface-sunk:var(--acc-ref-cream-200);
  --acc-color-surface-inverse:var(--acc-ref-navy-900);
  --acc-color-surface-inverse-raised:var(--acc-ref-navy-800);
  --acc-color-surface-selected:var(--acc-ref-rust-100);

  --acc-color-text-primary:var(--acc-ref-navy-900);
  --acc-color-text-secondary:var(--acc-ref-navy-600);
  --acc-color-text-accent:var(--acc-ref-rust-800);
  --acc-color-text-on-inverse:var(--acc-ref-cream-100);
  --acc-color-text-on-inverse-secondary:var(--acc-ref-navy-300);
  --acc-color-text-accent-on-inverse:var(--acc-ref-rust-300);
  --acc-color-text-error:var(--acc-ref-red-700);

  --acc-color-action-primary-bg:var(--acc-ref-rust-500);
  --acc-color-action-primary-bg-hover:var(--acc-ref-rust-600);
  --acc-color-action-primary-fg:var(--acc-ref-navy-900);
  --acc-color-action-secondary-bg:var(--acc-ref-navy-900);
  --acc-color-action-secondary-fg:var(--acc-ref-cream-100);

  --acc-color-border-subtle:var(--acc-ref-cream-300);
  --acc-color-border-strong:var(--acc-ref-navy-900);
  --acc-color-border-error:var(--acc-ref-red-700);
  --acc-color-focus-ring:var(--acc-ref-navy-900);
  --acc-color-focus-ring-on-inverse:var(--acc-ref-rust-300);

  --acc-font-display:var(--acc-ref-font-serif);
  --acc-font-body:var(--acc-ref-font-sans);

  /* fluid type scale, 1.25 ratio on mobile growing to ~1.333 on desktop */
  --acc-type-size-xs:0.8125rem;   /* 13px floor for any label */
  --acc-type-size-s:0.9375rem;    /* 15px */
  --acc-type-size-m:1.0625rem;    /* 17px body */
  --acc-type-size-l:clamp(1.1875rem,1.1rem + .4vw,1.375rem);
  --acc-type-size-xl:clamp(1.5rem,1.3rem + 1vw,2rem);
  --acc-type-size-2xl:clamp(2rem,1.6rem + 2vw,3rem);
  --acc-type-size-3xl:clamp(2.625rem,1.9rem + 3.6vw,5.25rem);
  --acc-type-leading-tight:1.04;
  --acc-type-leading-snug:1.25;
  --acc-type-leading-body:1.6;
  --acc-type-tracking-display:-0.02em;
  --acc-type-tracking-label:0.04em;

  --acc-space-gutter:clamp(var(--acc-ref-space-4),4vw,var(--acc-ref-space-6));
  --acc-space-section:clamp(var(--acc-ref-space-8),9vw,var(--acc-ref-space-10));
  --acc-space-stack-s:var(--acc-ref-space-3);
  --acc-space-stack-m:var(--acc-ref-space-5);
  --acc-space-stack-l:var(--acc-ref-space-7);
  --acc-layout-max:1200px;

  --acc-radius-control:var(--acc-ref-radius-pill);
  --acc-radius-card:var(--acc-ref-radius-m);
  --acc-radius-panel:var(--acc-ref-radius-l);
  --acc-radius-field:var(--acc-ref-radius-s);

  --acc-shadow-raised:0 1px 0 rgb(14 26 48 / .04),0 8px 24px -12px rgb(14 26 48 / .18);
  --acc-shadow-overlay:0 24px 64px -16px rgb(14 26 48 / .35);

  --acc-motion-ease:var(--acc-ref-ease-out);
  --acc-motion-fast:var(--acc-ref-dur-fast);
  --acc-motion-base:var(--acc-ref-dur-base);
  --acc-motion-slow:var(--acc-ref-dur-slow);

  --acc-target-min:44px; /* above the WCAG 2.2 AA 24px floor, sized for thumbs */

  /* ── 3. COMPONENT ────────────────────────────── */
  --acc-button-height:48px;
  --acc-button-radius:var(--acc-radius-control);
  --acc-button-primary-bg:var(--acc-color-action-primary-bg);
  --acc-button-primary-bg-hover:var(--acc-color-action-primary-bg-hover);
  --acc-button-primary-fg:var(--acc-color-action-primary-fg);
  --acc-button-secondary-bg:var(--acc-color-action-secondary-bg);
  --acc-button-secondary-fg:var(--acc-color-action-secondary-fg);
  --acc-button-ghost-border:var(--acc-color-border-strong);

  --acc-card-bg:var(--acc-color-surface-raised);
  --acc-card-border:var(--acc-color-border-subtle);
  --acc-card-radius:var(--acc-radius-card);
  --acc-card-pad:clamp(var(--acc-ref-space-5),3vw,var(--acc-ref-space-6));

  --acc-choice-bg:var(--acc-color-surface-raised);
  --acc-choice-border:var(--acc-color-border-subtle);
  --acc-choice-border-selected:var(--acc-color-border-strong);
  --acc-choice-bg-selected:var(--acc-color-surface-selected);
  --acc-choice-check-bg:var(--acc-color-action-primary-bg);
  --acc-choice-check-fg:var(--acc-color-action-primary-fg);

  --acc-header-bg:color-mix(in srgb,var(--acc-color-surface-default) 84%,transparent);
  --acc-header-border:var(--acc-color-border-subtle);

  --acc-receipt-bg:var(--acc-color-surface-inverse);
  --acc-receipt-fg:var(--acc-color-text-on-inverse);
  --acc-receipt-muted:var(--acc-color-text-on-inverse-secondary);

  --acc-field-border:var(--acc-ref-navy-600);
  --acc-field-bg:var(--acc-ref-white);
  --acc-field-radius:var(--acc-radius-field);

  --acc-bar-height:76px;
}
