/* IDauto Design System — tokens.css
 * Generated by hand from tokens/idauto.tokens.json (DTCG 2025.10).
 * tests/design-system-test.js verifies every color value here matches the JSON.
 * Theme model: light is the document default; dark follows prefers-color-scheme
 * unless [data-theme] pins a choice. */

:root {
  /* color — light (Papier & Encre) */
  --ida-bg: #F6F4EE;
  --ida-surface: #FFFFFF;
  --ida-surface-raised: #FFFFFF;
  --ida-surface-sunken: #EFECE4;
  --ida-text: #1C1B18;
  --ida-text-muted: #5D594F;
  --ida-text-faint: #8A8578;
  --ida-border: #DCD8CC;
  --ida-border-strong: #A9A395;
  --ida-primary: #1C1B18;
  --ida-primary-contrast: #F6F4EE;
  --ida-verify: #1D6B4F;
  --ida-verify-strong: #14523C;
  --ida-verify-tint: #E3EFE8;
  --ida-pending: #8A5A0B;
  --ida-pending-tint: #F5EBD8;
  --ida-danger: #9E3125;
  --ida-danger-tint: #F7E5E2;
  --ida-info: #44514E;
  --ida-info-tint: #E7ECEA;
  --ida-focus: #1D6B4F;
  --ida-plate-field: #0B0B0C;
  --ida-plate-glyph: #FAFAF7;

  /* typography */
  --ida-font-editorial: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --ida-font-id: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ida-size-12: 0.75rem;
  --ida-size-14: 0.875rem;
  --ida-size-16: 1rem;
  --ida-size-18: 1.125rem;
  --ida-size-22: 1.375rem;
  --ida-size-28: 1.75rem;
  --ida-size-36: 2.25rem;
  --ida-size-46: 2.875rem;
  --ida-weight-regular: 400;
  --ida-weight-medium: 500;
  --ida-weight-semibold: 600;

  /* space (4px base) */
  --ida-space-1: 4px;
  --ida-space-2: 8px;
  --ida-space-3: 12px;
  --ida-space-4: 16px;
  --ida-space-5: 24px;
  --ida-space-6: 32px;
  --ida-space-7: 48px;
  --ida-space-8: 64px;

  /* radius */
  --ida-radius-chip: 2px;
  --ida-radius-control: 4px;
  --ida-radius-plate: 6px;
  --ida-radius-card: 8px;
  --ida-radius-seal: 999px;

  /* elevation (warm ink shadows, never colored glow) */
  --ida-shadow-1: 0 1px 2px 0 rgba(28, 27, 24, 0.08);
  --ida-shadow-2: 0 2px 8px 0 rgba(28, 27, 24, 0.12);
  --ida-shadow-3: 0 8px 24px 0 rgba(28, 27, 24, 0.16);

  /* motion */
  --ida-duration-fast: 120ms;
  --ida-duration-base: 200ms;
  --ida-duration-slow: 320ms;
  --ida-easing-standard: cubic-bezier(0.2, 0, 0, 1);

  /* security-line pattern intensity (trame) */
  --ida-trame-opacity: 0.05;

  /* overlay scrim behind modal/drawer */
  --ida-scrim: rgba(28, 27, 24, 0.5);

  color-scheme: light;
}

/* dark — Asphalte (system preference, not pinned) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ida-bg: #171614;
    --ida-surface: #1F1E1B;
    --ida-surface-raised: #282622;
    --ida-surface-sunken: #121110;
    --ida-text: #ECE9E1;
    --ida-text-muted: #B0AA9C;
    --ida-text-faint: #847F72;
    --ida-border: #3B3933;
    --ida-border-strong: #5C594F;
    --ida-primary: #ECE9E1;
    --ida-primary-contrast: #1C1B18;
    --ida-verify: #63B893;
    --ida-verify-strong: #8ACCAD;
    --ida-verify-tint: #20342B;
    --ida-pending: #D2A24C;
    --ida-pending-tint: #37301F;
    --ida-danger: #DE8578;
    --ida-danger-tint: #3B2521;
    --ida-info: #A3B3AE;
    --ida-info-tint: #28302E;
    --ida-focus: #63B893;
    --ida-plate-field: #0B0B0C;
    --ida-plate-glyph: #FAFAF7;
    --ida-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
    --ida-shadow-2: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
    --ida-shadow-3: 0 8px 24px 0 rgba(0, 0, 0, 0.5);
    --ida-trame-opacity: 0.07;
    --ida-scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

/* dark — pinned by the user's explicit choice */
:root[data-theme="dark"] {
  --ida-bg: #171614;
  --ida-surface: #1F1E1B;
  --ida-surface-raised: #282622;
  --ida-surface-sunken: #121110;
  --ida-text: #ECE9E1;
  --ida-text-muted: #B0AA9C;
  --ida-text-faint: #847F72;
  --ida-border: #3B3933;
  --ida-border-strong: #5C594F;
  --ida-primary: #ECE9E1;
  --ida-primary-contrast: #1C1B18;
  --ida-verify: #63B893;
  --ida-verify-strong: #8ACCAD;
  --ida-verify-tint: #20342B;
  --ida-pending: #D2A24C;
  --ida-pending-tint: #37301F;
  --ida-danger: #DE8578;
  --ida-danger-tint: #3B2521;
  --ida-info: #A3B3AE;
  --ida-info-tint: #28302E;
  --ida-focus: #63B893;
  --ida-plate-field: #0B0B0C;
  --ida-plate-glyph: #FAFAF7;
  --ida-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --ida-shadow-2: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
  --ida-shadow-3: 0 8px 24px 0 rgba(0, 0, 0, 0.5);
  --ida-trame-opacity: 0.07;
  --ida-scrim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}