/* answeReady – brand tokens v1.0
   Brand identity = locked. Change content, never these values.
   Prefix: --ar-   Base unit: 8px   Fonts: Inter, IBM Plex Mono (evidence only) */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/Inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/Inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/Inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("fonts/Inter-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-500.woff2") format("woff2"); }

:root {
  /* ---- Brand primaries (locked) ---- */
  --ar-deep-ink: #0B1F44;        /* text, headings, dark grounds, logo. 16.23:1 on white */
  --ar-answer-blue: #3B82F6;     /* "Ready", Answer Frame, focal data, large emphasis. 3.68:1 on white: 24px+ or graphics only */

  /* ---- Accessible blue derivatives (text and controls) ---- */
  --ar-blue-600: #2563EB;        /* links, primary button fill, small blue text. 5.17:1 on white */
  --ar-blue-700: #1D4ED8;        /* hover/pressed. 6.70:1 on white */
  --ar-blue-50:  #EFF6FF;        /* selected row, focal highlight ground */

  /* ---- Neutrals ---- */
  --ar-white: #FFFFFF;
  --ar-soft-grey: #F2F4F7;       /* section grounds, evidence panels */
  --ar-line: #E4E7EC;            /* dividers, table rules */
  --ar-border: #D0D5DD;          /* card and input borders */
  --ar-disabled: #98A2B3;        /* disabled text and icons (exempt from AA) */
  --ar-mid-grey: #667085;        /* secondary text, captions, competitor data. 4.97:1 on white */
  --ar-slate: #344054;           /* strong secondary text, table body. 10.46:1 on white */

  /* ---- Semantic DATA colours (never decorative) ---- */
  --ar-success: #16A34A;         /* verified / fixed / positive – fills, icons, bars */
  --ar-warning: #D97706;         /* attention / review – fills, icons, bars */
  --ar-error:   #DC2626;         /* error / incorrect – fills, icons, text (4.83:1) */
  --ar-success-text: #15803D;    /* green text on white, 5.02:1 */
  --ar-warning-text: #B45309;    /* amber text on white, 5.02:1 */
  --ar-error-text:   #B91C1C;    /* red text on white, 6.47:1 */
  --ar-success-bg: #F0FDF4;
  --ar-warning-bg: #FFFBEB;
  --ar-error-bg:   #FEF2F2;

  /* ---- Role aliases ---- */
  --ar-text: var(--ar-deep-ink);
  --ar-text-secondary: var(--ar-mid-grey);
  --ar-link: var(--ar-blue-600);
  --ar-surface: var(--ar-white);
  --ar-surface-alt: var(--ar-soft-grey);
  --ar-surface-inverse: var(--ar-deep-ink);
  --ar-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.45);

  /* ---- Typography ---- */
  --ar-font-sans: Inter, Arial, Helvetica, sans-serif;
  --ar-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --ar-weight-regular: 400;      /* body */
  --ar-weight-medium: 500;       /* UI labels, secondary emphasis */
  --ar-weight-semibold: 600;     /* headings */
  --ar-weight-bold: 700;         /* large numbers and major statements only */

  --ar-text-display: 600 64px/1.06 var(--ar-font-sans);   /* letter-spacing -0.02em */
  --ar-text-h1: 600 48px/1.10 var(--ar-font-sans);        /* -0.02em */
  --ar-text-h2: 600 36px/1.15 var(--ar-font-sans);        /* -0.015em */
  --ar-text-h3: 600 28px/1.20 var(--ar-font-sans);        /* -0.01em */
  --ar-text-h4: 600 20px/1.30 var(--ar-font-sans);
  --ar-text-body-lg: 400 18px/1.55 var(--ar-font-sans);
  --ar-text-body: 400 16px/1.55 var(--ar-font-sans);
  --ar-text-small: 400 14px/1.50 var(--ar-font-sans);
  --ar-text-caption: 500 12px/1.40 var(--ar-font-sans);
  --ar-text-overline: 600 12px/1.30 var(--ar-font-sans);  /* uppercase, +0.08em */
  --ar-text-evidence: 400 14px/1.55 var(--ar-font-mono);
  --ar-text-metric: 700 56px/1.00 var(--ar-font-sans);    /* -0.03em, tabular-nums */

  /* ---- Spacing (8px base) ---- */
  --ar-space-1: 8px;   --ar-space-2: 16px;  --ar-space-3: 24px;  --ar-space-4: 32px;
  --ar-space-5: 40px;  --ar-space-6: 48px;  --ar-space-8: 64px;  --ar-space-10: 80px;
  --ar-space-12: 96px; --ar-space-15: 120px;
  --ar-space-half: 4px;                     /* icon-to-label only */

  /* ---- Radius ---- */
  --ar-radius-sm: 4px;     /* tags, inputs inner elements */
  --ar-radius-md: 8px;     /* buttons, inputs, cards */
  --ar-radius-lg: 12px;    /* large panels – maximum */
  --ar-radius-pill: 999px; /* status chips only */

  /* ---- Borders and elevation ---- */
  --ar-border-width: 1px;
  --ar-border-default: 1px solid var(--ar-border);
  --ar-border-subtle: 1px solid var(--ar-line);
  --ar-frame-stroke: 2px;                   /* Answer Frame bracket stroke at 16px text; scales 1/8 of type size */
  --ar-shadow-1: 0 1px 2px rgba(11, 31, 68, 0.06);   /* only elevation allowed on cards */
  --ar-shadow-2: 0 8px 24px rgba(11, 31, 68, 0.10);  /* menus and dialogs only */

  /* ---- Layout ---- */
  --ar-container: 1240px;
  --ar-container-narrow: 760px;              /* long-form reading */
  --ar-gutter: 24px;
  --ar-columns: 12;
  --ar-page-margin: 24px;                    /* 48px ≥ 1024px */

  /* ---- Controls ---- */
  --ar-control-height: 44px;
  --ar-control-height-sm: 36px;
  --ar-control-padding-x: 20px;

  /* ---- Motion ---- */
  --ar-duration: 160ms;
  --ar-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Breakpoints (use in media queries; CSS variables cannot drive @media)
   sm 640px · md 768px · lg 1024px · xl 1280px */
@media (min-width: 1024px) { :root { --ar-page-margin: 48px; } }

/* ---------- Base ---------- */
.ar, .ar * { box-sizing: border-box; }
.ar { font: var(--ar-text-body); color: var(--ar-text); background: var(--ar-surface); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
.ar-container { max-width: var(--ar-container); margin: 0 auto; padding: 0 var(--ar-page-margin); }
.ar-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ar-gutter); }
.ar a:not(.ar-btn) { color: var(--ar-link); text-underline-offset: 3px; }
.ar-display { font: var(--ar-text-display); letter-spacing: -0.02em; }
.ar-h1 { font: var(--ar-text-h1); letter-spacing: -0.02em; }
.ar-h2 { font: var(--ar-text-h2); letter-spacing: -0.015em; }
.ar-h3 { font: var(--ar-text-h3); letter-spacing: -0.01em; }
.ar-h4 { font: var(--ar-text-h4); }
.ar-body-lg { font: var(--ar-text-body-lg); }
.ar-small { font: var(--ar-text-small); }
.ar-caption { font: var(--ar-text-caption); color: var(--ar-text-secondary); }
.ar-overline { font: var(--ar-text-overline); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-blue-600); }
.ar-evidence { font: var(--ar-text-evidence); }
.ar-metric { font: var(--ar-text-metric); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.ar-btn { display: inline-flex; align-items: center; gap: 8px; height: var(--ar-control-height); padding: 0 var(--ar-control-padding-x);
  font: 600 16px/1 var(--ar-font-sans); border-radius: var(--ar-radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--ar-duration) var(--ar-ease), border-color var(--ar-duration) var(--ar-ease); }
.ar-btn:focus-visible { outline: none; box-shadow: var(--ar-focus-ring); }
.ar-btn--primary { background: var(--ar-blue-600); color: var(--ar-white); }
.ar-btn--primary:hover { background: var(--ar-blue-700); }
.ar-btn--secondary { background: var(--ar-white); color: var(--ar-deep-ink); border-color: var(--ar-border); }
.ar-btn--secondary:hover { border-color: var(--ar-deep-ink); }
.ar-btn--inverse { background: var(--ar-white); color: var(--ar-deep-ink); }
.ar-btn[disabled] { background: var(--ar-soft-grey); color: var(--ar-disabled); border-color: var(--ar-line); cursor: not-allowed; }

/* ---------- Forms ---------- */
.ar-field { display: grid; gap: 8px; }
.ar-label { font: 500 14px/1.4 var(--ar-font-sans); color: var(--ar-deep-ink); }
.ar-input { height: var(--ar-control-height); padding: 0 16px; font: var(--ar-text-body); color: var(--ar-deep-ink);
  background: var(--ar-white); border: var(--ar-border-default); border-radius: var(--ar-radius-md); width: 100%; }
.ar-input::placeholder { color: var(--ar-mid-grey); }
.ar-input:focus { outline: none; border-color: var(--ar-answer-blue); box-shadow: var(--ar-focus-ring); }
.ar-input[aria-invalid="true"] { border-color: var(--ar-error); }
.ar-hint { font: var(--ar-text-small); color: var(--ar-mid-grey); }
.ar-hint--error { color: var(--ar-error-text); }

/* ---------- Answer Frame (the owned device) ---------- */
.ar-frame { position: relative; display: inline-block; padding: 0.35em 0.9em; }
.ar-frame::before, .ar-frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0.45em;
  border: max(2px, 0.125em) solid var(--ar-answer-blue); }
.ar-frame::before { left: 0; border-right: 0; }
.ar-frame::after { right: 0; border-left: 0; }
.ar-frame--error::before, .ar-frame--error::after { border-color: var(--ar-error); }
.ar-frame--inverse { color: var(--ar-white); }

/* ---------- Cards ---------- */
.ar-card { background: var(--ar-white); border: var(--ar-border-subtle); border-radius: var(--ar-radius-md); padding: var(--ar-space-3); }
.ar-card--evidence { background: var(--ar-soft-grey); border: 0; }
.ar-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--ar-radius-pill); font: 600 12px/1 var(--ar-font-sans); letter-spacing: 0.02em; }
.ar-chip--success { background: var(--ar-success-bg); color: var(--ar-success-text); }
.ar-chip--warning { background: var(--ar-warning-bg); color: var(--ar-warning-text); }
.ar-chip--error { background: var(--ar-error-bg); color: var(--ar-error-text); }
.ar-chip--neutral { background: var(--ar-soft-grey); color: var(--ar-slate); }