/* Print Foreman design tokens, v0.1 (2026-09-30)
   Brand colours, surfaces, text and type families for light and dark mode.
   Status colours (Idle, Printing, Paused, Complete, Error, Offline, Needs Attention, Maintenance)
   are NOT here yet. They come in the next round and must never reuse --pf-accent.

   Usage: load this file, then style components with the semantic tokens (--pf-bg, --pf-text,
   --pf-accent...). Use the primitives (--pf-orange-500...) only inside this file.
   Dark mode follows the OS by default; set data-theme="light" or "dark" on <html> to force one. */

:root {
  /* ---------- Primitives ---------- */
  --pf-orange-100: #FFE7D6;
  --pf-orange-300: #FF8A45;  /* orange text on dark surfaces */
  --pf-orange-400: #FF8540;  /* hover on orange fills */
  --pf-orange-500: #FF6B1A;  /* Safety Orange: the brand colour */
  --pf-orange-700: #B03F00;  /* Orange Ink: orange text on light surfaces */
  --pf-orange-900: #3A1C0B;

  --pf-graphite-950: #0E1013;
  --pf-graphite-900: #16181C;  /* Graphite */
  --pf-graphite-850: #1F2328;
  --pf-graphite-800: #2B3038;  /* Steel */
  --pf-graphite-600: #6B727D;
  --pf-graphite-500: #767C86;
  --pf-graphite-450: #5B616B;
  --pf-graphite-400: #9AA1AB;  /* Aluminum */
  --pf-graphite-200: #D9D6D0;
  --pf-graphite-100: #EEECE8;  /* Concrete */
  --pf-graphite-50:  #F4F3F0;
  --pf-white:        #FFFFFF;

  /* ---------- Type families ---------- */
  --pf-font-display: "Archivo", "Arial Black", system-ui, sans-serif; /* use with font-stretch: 118% (wdth axis) */
  --pf-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* ---------- Semantic: light (default) ---------- */
  --pf-bg: var(--pf-graphite-50);
  --pf-surface: var(--pf-white);
  --pf-surface-2: var(--pf-graphite-100);
  --pf-border: var(--pf-graphite-200);
  --pf-border-strong: var(--pf-graphite-500);   /* 3:1 on bg, for input outlines */
  --pf-text: var(--pf-graphite-900);
  --pf-text-muted: var(--pf-graphite-450);
  --pf-accent: var(--pf-orange-500);            /* primary button fill, progress fill, brand */
  --pf-accent-hover: var(--pf-orange-400);
  --pf-on-accent: var(--pf-graphite-900);       /* text/icons on --pf-accent. Never white. */
  --pf-accent-text: var(--pf-orange-700);       /* links and orange text */
  --pf-accent-soft: var(--pf-orange-100);       /* selected row, subtle highlight */
  --pf-focus: var(--pf-orange-700);
  --pf-logo-mark: var(--pf-orange-500);
  --pf-logo-text: var(--pf-graphite-900);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pf-bg: var(--pf-graphite-950);
    --pf-surface: var(--pf-graphite-900);
    --pf-surface-2: var(--pf-graphite-850);
    --pf-border: var(--pf-graphite-800);
    --pf-border-strong: var(--pf-graphite-600);
    --pf-text: var(--pf-graphite-100);
    --pf-text-muted: var(--pf-graphite-400);
    --pf-accent: var(--pf-orange-500);
    --pf-accent-hover: var(--pf-orange-400);
    --pf-on-accent: var(--pf-graphite-900);
    --pf-accent-text: var(--pf-orange-300);
    --pf-accent-soft: var(--pf-orange-900);
    --pf-focus: var(--pf-orange-300);
    --pf-logo-mark: var(--pf-orange-500);
    --pf-logo-text: var(--pf-graphite-100);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --pf-bg: var(--pf-graphite-950);
  --pf-surface: var(--pf-graphite-900);
  --pf-surface-2: var(--pf-graphite-850);
  --pf-border: var(--pf-graphite-800);
  --pf-border-strong: var(--pf-graphite-600);
  --pf-text: var(--pf-graphite-100);
  --pf-text-muted: var(--pf-graphite-400);
  --pf-accent: var(--pf-orange-500);
  --pf-accent-hover: var(--pf-orange-400);
  --pf-on-accent: var(--pf-graphite-900);
  --pf-accent-text: var(--pf-orange-300);
  --pf-accent-soft: var(--pf-orange-900);
  --pf-focus: var(--pf-orange-300);
  --pf-logo-mark: var(--pf-orange-500);
  --pf-logo-text: var(--pf-graphite-100);
  color-scheme: dark;
}