/**
 * CPR Design Tokens
 *
 * The color and surface tokens for every theme: the light defaults (:root), the automatic dark
 * mode (prefers-color-scheme), and the forced html.theme-dark / html.theme-light classes.
 * Moved here VERBATIM from design-system.css so a page can take the tokens without the
 * component classes (admin_locations.html does).
 *
 * Every page that links design-system.css links this file on the line right before it, so the
 * tokens keep the cascade position they had at the top of design-system.css. A separate <link>,
 * never an @import: lib/assetVersions.js content-hashes <link> URLs only, so an @import-ed
 * file could be served stale from the edge cache after a token change.
 */

:root {
  /* ===== TYPE ===== */
  /* Fixed-width text, where characters must line up column for column (#4074: the address pairs in the shipping
     print check). System faces only, no web font: SF Mono on iPhone/Mac, Roboto Mono on Android/ChromeOS. */
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* ===== SURFACES (backgrounds) ===== */
  --bg-page: #f3f4f6;        /* Page background */
  --bg-card: #ffffff;        /* Cards, panels, modals */
  --bg-nested: #f9fafb;      /* Nested content inside cards */
  --bg-input: #ffffff;       /* Input fields */
  --bg-hover: #f3f4f6;       /* Hover states on interactive elements */

  /* ===== TEXT ===== */
  --text: #1f2937;           /* Primary text */
  --text-muted: #6b7280;     /* Secondary/helper text */
  --text-heading: #1f2937;   /* Headings */

  /* ===== BORDERS ===== */
  --border: #e5e7eb;         /* Standard borders */
  --border-strong: #d1d5db;  /* Emphasized borders (inputs) */
  --border-focus: #3b82f6;   /* Focus ring color */

  /* ===== PRIMARY BUTTON ===== */
  --btn-bg: #3b82f6;
  --btn-bg-hover: #2563eb;
  --btn-text: #ffffff;

  /* ===== SECONDARY BUTTON ===== */
  --btn-secondary-bg: #e5e7eb;
  --btn-secondary-bg-hover: #d1d5db;
  --btn-secondary-text: #374151;

  /* ===== STATUS COLORS ===== */
  --success-bg: #d1fae5;
  --success-text: #065f46;
  --success-border: #6ee7b7;
  --success: #10b981;

  --warning-bg: #fffbeb;
  --warning-text: #92400e;
  --warning-border: #fcd34d;
  --warning: #f59e0b;

  --error-bg: #fee2e2;
  --error-text: #991b1b;
  --error-border: #fecaca;
  --error: #ef4444;
  /* #4123: the fill of a solid destructive button. White on it is 4.83:1 (AA); white on --error (#ef4444) is only
     3.76:1. One value for every theme (not redefined in the dark blocks below). */
  --danger-solid-bg: #dc2626;

  --info-bg: #bfdbfe;
  --info-text: #1e40af;
  --info-border: #93c5fd;
  --info: #3b82f6;

  /* ===== MISC ===== */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --radius: 0.375rem;
  --radius-lg: 0.5rem;
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* ===== DARK MODE ===== */
/* Auto: fires when OS/browser is in dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces */
    --bg-page: #111827;
    --bg-card: #1f2937;
    --bg-nested: #374151;
    --bg-input: #374151;
    --bg-hover: #374151;

    /* Text */
    --text: #f3f4f6;
    --text-muted: #9ca3af;
    --text-heading: #f3f4f6;

    /* Borders */
    --border: #4b5563;
    --border-strong: #6b7280;
    --border-focus: #60a5fa;

    /* Primary Button */
    --btn-bg: #3b82f6;
    --btn-bg-hover: #60a5fa;
    --btn-text: #ffffff;

    /* Secondary Button */
    --btn-secondary-bg: #374151;
    --btn-secondary-bg-hover: #4b5563;
    --btn-secondary-text: #d1d5db;

    /* Status Colors */
    --success-bg: #064e3b;
    --success-text: #6ee7b7;
    --success-border: #10b981;

    --warning-bg: #422006;
    --warning-text: #fcd34d;
    --warning-border: #92400e;

    --error-bg: #7f1d1d;
    --error-text: #fecaca;
    --error-border: #dc2626;

    --info-bg: #1e3a8a;
    --info-text: #93c5fd;
    --info-border: #3b82f6;

    /* Misc */
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.3);
  }
}

/* Manual: fires when user toggles dark mode via UI */
html.theme-dark {
  /* Surfaces */
  --bg-page: #111827;
  --bg-card: #1f2937;
  --bg-nested: #374151;
  --bg-input: #374151;
  --bg-hover: #374151;

  /* Text */
  --text: #f3f4f6;
  --text-muted: #9ca3af;
  --text-heading: #f3f4f6;

  /* Borders */
  --border: #4b5563;
  --border-strong: #6b7280;
  --border-focus: #60a5fa;

  /* Primary Button */
  --btn-bg: #3b82f6;
  --btn-bg-hover: #60a5fa;
  --btn-text: #ffffff;

  /* Secondary Button */
  --btn-secondary-bg: #374151;
  --btn-secondary-bg-hover: #4b5563;
  --btn-secondary-text: #d1d5db;

  /* Status Colors */
  --success-bg: #064e3b;
  --success-text: #6ee7b7;
  --success-border: #10b981;

  --warning-bg: #422006;
  --warning-text: #fcd34d;
  --warning-border: #92400e;

  --error-bg: #7f1d1d;
  --error-text: #fecaca;
  --error-border: #dc2626;

  --info-bg: #1e3a8a;
  --info-text: #93c5fd;
  --info-border: #3b82f6;

  /* Misc */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.3);
}

/* Manual: forces light mode (overrides OS dark preference) */
html.theme-light {
  --bg-page: #f3f4f6;
  --bg-card: #ffffff;
  --bg-nested: #f9fafb;
  --bg-input: #ffffff;
  --bg-hover: #f3f4f6;
  --text: #1f2937;
  --text-muted: #6b7280;
  --text-heading: #1f2937;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --border-focus: #3b82f6;
  --btn-bg: #3b82f6;
  --btn-bg-hover: #2563eb;
  --btn-text: #ffffff;
  --btn-secondary-bg: #e5e7eb;
  --btn-secondary-bg-hover: #d1d5db;
  --btn-secondary-text: #374151;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);
}