/* Manifest0-Ai design tokens v1
   Light = B1 Corporate Navy Trust (v2-01). Dark = B7 Industrial Steel Gray (v2-07).
   Colors sampled from the mockups with Pillow; AA fixes noted inline. */

:root {
  color-scheme: light;

  /* Color: surfaces */
  --m0-bg: #F5F6F8;              /* sampled page bg */
  --m0-surface: #FFFFFF;         /* sampled card */
  --m0-surface-2: #F2F3F7;       /* sampled chip / input fill */
  --m0-header: #041D3E;          /* sampled navy hero band */
  --m0-on-header: #FFFFFF;
  --m0-header-accent: #7FA6F5;   /* "-Ai" in wordmark on navy, 6.9:1 */

  /* Color: brand */
  --m0-primary: #041D3E;         /* sampled navy button */
  --m0-primary-hover: #0B2D5C;
  --m0-on-primary: #FFFFFF;      /* 16.8:1 */
  --m0-accent: #1C5FE4;          /* sampled active dot / icons, 5.5:1 on white */
  --m0-on-accent: #FFFFFF;
  --m0-focus: #1C5FE4;

  /* Color: text */
  --m0-text: #0F151F;            /* sampled, 18.3:1 */
  --m0-text-2: #5A6372;          /* AA FIX: sampled #9097A5 was 2.9:1, now 6.1:1 */
  --m0-text-muted: #5A6372;      /* placeholders use the same AA value */

  /* Color: lines */
  --m0-border: #D9DCE1;          /* decorative card border (sampled #D2D3D6 range) */
  --m0-border-strong: #8A93A3;   /* input / dropzone outline, 3.1:1 (WCAG 1.4.11) */
  --m0-dot-off: #D8D9DC;         /* sampled inactive dot */

  /* Color: status */
  --m0-success: #194A25;         /* sampled "SDS found" text, 8.4:1 on its bg */
  --m0-success-bg: #DAEDDB;      /* sampled badge fill */
  --m0-warning: #8A4B00;         /* derived, 6.0:1 */
  --m0-warning-bg: #FDF0D5;
  --m0-error: #B42318;           /* derived, 5.5:1 */
  --m0-error-bg: #FEE4E2;

  /* Type */
  --m0-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --m0-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --m0-fs-display: 1.75rem;  --m0-lh-display: 1.2;   /* 28/34 hero */
  --m0-fs-h1: 1.5rem;        --m0-lh-h1: 1.25;       /* 24/30 */
  --m0-fs-h2: 1.25rem;       --m0-lh-h2: 1.3;        /* 20/26 */
  --m0-fs-h3: 1.0625rem;     --m0-lh-h3: 1.35;       /* 17/23 card titles */
  --m0-fs-body: 1rem;        --m0-lh-body: 1.5;      /* 16/24 (16 min stops iOS zoom on inputs) */
  --m0-fs-sm: 0.875rem;      --m0-lh-sm: 1.45;       /* 14/20 */
  --m0-fs-xs: 0.75rem;       --m0-lh-xs: 1.35;       /* 12/16 badges, captions */
  --m0-fw-regular: 400; --m0-fw-medium: 500; --m0-fw-semibold: 600; --m0-fw-bold: 700;

  /* Space (4px grid) */
  --m0-space-1: 4px;  --m0-space-2: 8px;  --m0-space-3: 12px; --m0-space-4: 16px;
  --m0-space-5: 20px; --m0-space-6: 24px; --m0-space-8: 32px; --m0-space-10: 40px; --m0-space-12: 48px;
  --m0-gutter: 16px;          /* page side padding on phones */

  /* Radius */
  --m0-radius-sm: 6px;   /* badges, chips */
  --m0-radius-md: 10px;  /* inputs, buttons */
  --m0-radius-lg: 14px;  /* cards, dropzone */
  --m0-radius-pill: 999px;

  /* Elevation */
  --m0-shadow-1: 0 1px 2px rgba(15,21,31,.06), 0 1px 3px rgba(15,21,31,.08);
  --m0-shadow-2: 0 4px 12px rgba(15,21,31,.10);
  --m0-shadow-sticky: 0 -4px 16px rgba(15,21,31,.08);

  /* Sizing */
  --m0-tap: 44px;        /* minimum tap target */
  --m0-btn-h: 52px;      /* primary button */
  --m0-input-h: 48px;
  --m0-dot: 8px;
  --m0-dot-active-w: 20px;
  --m0-content-max: 430px;
  --m0-motion: 160ms cubic-bezier(.2,.8,.2,1);
}

/* Dark: B7 Industrial Steel Gray */
[data-theme="dark"] {
  color-scheme: dark;
  --m0-bg: #252C32;              /* sampled page bg */
  --m0-surface: #343D43;         /* sampled card */
  --m0-surface-2: #22282E;       /* sampled input */
  --m0-header: #252C32;
  --m0-on-header: #F2F5F9;
  --m0-header-accent: #F3BF2B;

  --m0-primary: #F3BF2B;         /* sampled hazard yellow button */
  --m0-primary-hover: #FFCD3F;
  --m0-on-primary: #111111;      /* 11.1:1 */
  --m0-accent: #F3BF2B;          /* checkmarks, active dot, underline; 6.5:1 on surface */
  --m0-on-accent: #111111;
  --m0-focus: #F3BF2B;

  --m0-text: #F2F5F9;            /* sampled, 10.1:1 on surface */
  --m0-text-2: #C9CED4;          /* sampled, 7.0:1 */
  --m0-text-muted: #A9AEB4;      /* AA FIX: sampled #9DA1A6 was 4.3:1, now 5.0:1 */

  --m0-border: #4A535C;          /* decorative */
  --m0-border-strong: #737C86;   /* input outline, 3.5:1 on input fill */
  --m0-dot-off: #737C86;

  --m0-success: #6EE7A0;         /* derived, 8.0:1 */
  --m0-success-bg: #1E3A2B;
  --m0-warning: #FDBA74;
  --m0-warning-bg: #3B2A14;
  --m0-error: #FCA5A5;
  --m0-error-bg: #3F1D1D;

  --m0-shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --m0-shadow-2: 0 6px 16px rgba(0,0,0,.40);
  --m0-shadow-sticky: 0 -4px 16px rgba(0,0,0,.45);
}

/* Follow the OS when no explicit choice was made */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --m0-bg: #252C32; --m0-surface: #343D43; --m0-surface-2: #22282E;
    --m0-header: #252C32; --m0-on-header: #F2F5F9; --m0-header-accent: #F3BF2B;
    --m0-primary: #F3BF2B; --m0-primary-hover: #FFCD3F; --m0-on-primary: #111111;
    --m0-accent: #F3BF2B; --m0-on-accent: #111111; --m0-focus: #F3BF2B;
    --m0-text: #F2F5F9; --m0-text-2: #C9CED4; --m0-text-muted: #A9AEB4;
    --m0-border: #4A535C; --m0-border-strong: #737C86; --m0-dot-off: #737C86;
    --m0-success: #6EE7A0; --m0-success-bg: #1E3A2B;
    --m0-warning: #FDBA74; --m0-warning-bg: #3B2A14;
    --m0-error: #FCA5A5; --m0-error-bg: #3F1D1D;
    --m0-shadow-1: 0 1px 2px rgba(0,0,0,.35);
    --m0-shadow-2: 0 6px 16px rgba(0,0,0,.40);
    --m0-shadow-sticky: 0 -4px 16px rgba(0,0,0,.45);
  }
}

/* Breakpoints (mobile first; base styles target 360 to 430px)
   sm  >= 480px  large phones landscape
   md  >= 768px  tablet: center a 560px column, 2 column results
   lg  >= 1024px desktop: 2 columns (upload left, deck + results right), max 1120px */