/* SharpOCR design tokens — vendored verbatim from the Claude Design project
   "SharpOCR Design System" (6c1392fa-be4d-4e81-b8e2-f47d8d972893), from
   tokens/{colors,typography,spacing,radius,elevation,motion,base}.css.

   Do not hand-edit. Re-sync from the design project instead, so the two copies
   never drift. The one upstream file NOT vendored is tokens/fonts.css, which
   @imports Google Fonts; assets/fonts.css replaces it with self-hosted faces.
   Import order matches the upstream styles.css: base.css depends on the
   custom properties defined above it. */

/* ---- colors ---- */
:root{
  /* Base — indigo (primary brand) */
  --indigo-50:#EEF0FB;--indigo-100:#DDE1F6;--indigo-200:#B9C1EC;--indigo-300:#8E9ADE;
  --indigo-400:#5C6BC4;--indigo-500:#2B3A8F;--indigo-600:#223074;--indigo-700:#1A2559;--indigo-800:#131B41;

  /* Base — teal (accuracy, verified, GDPR) */
  --teal-50:#E6F4F0;--teal-100:#C6E7DF;--teal-300:#63BBA6;--teal-500:#0E8A6E;--teal-600:#0B6E58;--teal-700:#084A3B;

  /* Base — neutrals (cool graphite) */
  --ink-900:#101323;--ink-800:#1C2033;--ink-700:#2A2F45;--ink-600:#454B66;--ink-500:#545B75;
  --ink-400:#8A90A8;--ink-300:#B6BBCB;--ink-200:#DCE0EC;--ink-100:#E9ECF4;--ink-50:#F6F7FB;--white:#FFFFFF;

  /* Base — semantic hues */
  --amber-50:#FCF3E4;--amber-500:#B8720B;--amber-600:#96590A;
  --red-50:#FBECEA;--red-500:#C0342B;--red-600:#9C271F;

  /* Semantic — text */
  --text-strong:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--ink-500);
  --text-subtle:var(--ink-400);--text-inverse:var(--white);--text-link:var(--indigo-500);
  --text-link-hover:var(--indigo-600);--text-accent:var(--teal-600);

  /* Semantic — surfaces */
  --surface-page:var(--ink-50);--surface-card:var(--white);--surface-sunken:var(--ink-100);
  --surface-inverse:var(--ink-900);--surface-brand:var(--indigo-500);--surface-brand-soft:var(--indigo-50);
  --surface-accent-soft:var(--teal-50);--surface-overlay:rgba(16,19,35,.55);

  /* Semantic — borders */
  --border-subtle:var(--ink-200);--border-default:var(--ink-300);--border-strong:var(--ink-400);
  --border-brand:var(--indigo-500);--border-focus:var(--indigo-400);

  /* Semantic — interactive */
  --action-primary:var(--indigo-500);--action-primary-hover:var(--indigo-600);--action-primary-active:var(--indigo-700);
  --action-secondary:var(--white);--action-secondary-hover:var(--ink-50);
  --action-ghost-hover:var(--indigo-50);--action-disabled:var(--ink-200);--action-disabled-text:var(--ink-400);

  /* Semantic — status */
  --status-success:var(--teal-500);--status-success-soft:var(--teal-50);
  --status-warning:var(--amber-500);--status-warning-soft:var(--amber-50);
  --status-danger:var(--red-500);--status-danger-soft:var(--red-50);
  --status-info:var(--indigo-500);--status-info-soft:var(--indigo-50);

  /* Confidence scale — OCR result highlighting */
  --confidence-high:var(--teal-500);--confidence-high-soft:rgba(14,138,110,.12);
  --confidence-medium:var(--amber-500);--confidence-medium-soft:rgba(184,114,11,.14);
  --confidence-low:var(--red-500);--confidence-low-soft:rgba(192,52,43,.12);
}

/* ---- typography ---- */
:root{
  --font-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --font-sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-base:15px;--text-md:17px;
  --text-lg:20px;--text-xl:24px;--text-2xl:30px;--text-3xl:38px;--text-4xl:48px;--text-5xl:62px;--text-6xl:80px;

  --leading-tight:1.06;--leading-snug:1.22;--leading-normal:1.5;--leading-relaxed:1.65;

  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

  --tracking-tight:-0.03em;--tracking-snug:-0.015em;--tracking-normal:0;
  --tracking-wide:0.02em;--tracking-caps:0.09em;

  /* Roles */
  --type-hero-family:var(--font-display);--type-hero-size:var(--text-5xl);
  --type-hero-weight:var(--weight-600,600);--type-hero-leading:var(--leading-tight);
  --type-heading-family:var(--font-display);
  --type-body-family:var(--font-sans);--type-body-size:var(--text-base);--type-body-leading:var(--leading-relaxed);
  --type-ui-family:var(--font-sans);--type-ui-size:var(--text-sm);
  --type-data-family:var(--font-mono);--type-data-size:var(--text-sm);
  --type-eyebrow-size:var(--text-xs);--type-eyebrow-tracking:var(--tracking-caps);
}

/* ---- spacing ---- */
:root{
  --space-0:0px;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;
  --space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:56px;
  --space-11:72px;--space-12:96px;--space-13:128px;

  --gutter-card:20px;--gutter-card-lg:28px;--gutter-section:72px;--gutter-section-lg:96px;
  --stack-tight:8px;--stack-default:16px;--stack-loose:24px;
  --inline-tight:6px;--inline-default:10px;--inline-loose:16px;

  --container-sm:640px;--container-md:880px;--container-lg:1120px;--container-xl:1320px;
  --control-h-sm:30px;--control-h-md:38px;--control-h-lg:46px;
  --sidebar-w:248px;--topbar-h:60px;
}

/* ---- radius ---- */
:root{
  --radius-xs:3px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-pill:999px;
  --radius-control:var(--radius-sm);--radius-card:var(--radius-lg);--radius-modal:var(--radius-xl);
  --radius-chip:var(--radius-pill);--radius-thumb:var(--radius-md);

  --border-w-hairline:1px;--border-w-thick:2px;
}

/* ---- elevation ---- */
:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(16,19,35,.06);
  --shadow-sm:0 1px 2px rgba(16,19,35,.05),0 2px 6px rgba(16,19,35,.05);
  --shadow-md:0 2px 4px rgba(16,19,35,.04),0 8px 20px rgba(16,19,35,.07);
  --shadow-lg:0 4px 8px rgba(16,19,35,.05),0 18px 44px rgba(16,19,35,.10);
  --shadow-focus:0 0 0 3px rgba(43,58,143,.22);
  --shadow-focus-danger:0 0 0 3px rgba(192,52,43,.20);
  --shadow-inset-field:inset 0 1px 1px rgba(16,19,35,.04);
  --blur-panel:saturate(1.4) blur(14px);
  --scrim-top:linear-gradient(to bottom,rgba(16,19,35,.72),rgba(16,19,35,0));
}

/* ---- motion ---- */
:root{
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --dur-instant:80ms;--dur-fast:140ms;--dur-base:200ms;--dur-slow:320ms;--dur-scan:1400ms;
  --transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);letter-spacing:var(--tracking-snug);line-height:var(--leading-snug);margin:0}
h1{font-size:var(--text-3xl);letter-spacing:var(--tracking-tight)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-md)}h4{font-size:var(--text-base)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid rgba(43,58,143,.28);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--text-link-hover)}
code,kbd,pre{font-family:var(--font-mono);font-size:var(--text-sm)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
::selection{background:var(--indigo-100);color:var(--ink-900)}