/* =============================================================================
   HPP Print Packaging Dashboard — Shared Design System
   Single crimson/rose brand · light mode · self-hosted fonts
   Consumed by BOTH the user dashboard (base.html) and the admin console (shell.html).
   ============================================================================= */

/* ---------- Fonts (self-hosted, no external CDN) ---------------------------- */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;                 /* variable */
  font-display: swap;
  src: url('../fonts/sora-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;                 /* variable */
  font-display: swap;
  src: url('../fonts/hankengrotesk-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibmplexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibmplexmono-500.woff2') format('woff2');
}

/* ---------- Design tokens --------------------------------------------------- */
:root {
  /* Brand — deep burgundy (#791234) */
  --brand: #791234;            /* fills, CTAs, active states */
  --brand-hover: #641029;      /* button hover (darker) */
  --brand-strong: #791234;     /* brand text on white (~9:1 contrast) */
  --brand-deep: #56091d;       /* gradient end / emphasis */
  --brand-soft: #f3e6ea;       /* soft chips / badges on light */
  --brand-tint: #faf3f2;       /* faint hover wash */
  --brand-ring: rgba(121, 18, 52, 0.30);
  --brand-gradient: linear-gradient(135deg, #9a1c44 0%, #791234 48%, #56091d 100%);

  /* Warm neutral ramp (built around #EBE0DE / #FFFFFF / #000000) */
  --bg: #ebe0de;
  --bg-elevated: #e2d4d1;
  --surface: #ffffff;
  --surface-2: #f6efed;
  --border: #ddcecb;
  --border-strong: #c7b4b0;
  --text: #191113;
  --text-2: #463639;
  --muted: #7a6a6d;
  --subtle: #a4928f;

  /* Dark sidebar surface — warm near-black burgundy */
  --nav-bg: #1b1215;
  --nav-bg-2: #251519;
  --nav-text: #d9cccb;
  --nav-muted: #8f7d80;
  --nav-border: #37242a;

  /* Semantic (tuned to sit on the warm neutral background) */
  --success: #15803d;  --success-bg: #dcefe1;  --success-fg: #14532d;
  --warning: #b45309;  --warning-bg: #f6ead0;  --warning-fg: #78350f;
  --danger:  #c0392b;  --danger-bg:  #f7e2df;  --danger-fg:  #8a2318;
  --info:    #1d4ed8;  --info-bg:    #dde8fb;  --info-fg:    #1e3a8a;
  --neutral-bg: #e7dcda; --neutral-fg: #5a4a4d;

  /* Typography */
  --font-display: 'Sora', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-md: 0.875rem;   /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: 2rem;      /* 32 */
  --fs-3xl: 2.5rem;    /* 40 */

  /* Spacing (4/8) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;

  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* Elevation */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sh-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-md: 0 6px 16px rgba(15, 23, 42, 0.08);
  --sh-lg: 0 18px 40px rgba(15, 23, 42, 0.14);
  --sh-brand: 0 10px 24px rgba(121, 18, 52, 0.26);

  /* Motion */
  --dur-fast: 140ms;
  --dur: 220ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layers */
  --z-sticky: 30; --z-drawer: 100; --z-modal: 150; --z-toast: 200;
}

/* ---------- Responsive breakpoints (single source of truth) ----------------
   CSS media queries can't read custom properties, so this scale is a
   convention every stylesheet in the app follows:
     ≤480px   phone
     ≤768px   large phone / small tablet (portrait)
     ≤1024px  tablet (admin auto-collapses to the icon rail up to here)
     ≤1280px  small laptop
   Design mobile-first; add width only as it becomes available. Use 100dvh
   (not 100vh) for full-height regions so mobile browser chrome is handled. */

/* ---------- Base ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

/* The hidden attribute always wins, even over component display rules
   (e.g. the global button display would otherwise reveal hidden buttons). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

a { color: var(--brand-strong); }

/* Tabular figures for numeric data */
.tabular,
.metric-card-value,
.kpi-card .value,
.admin-table td,
.mono { font-variant-numeric: tabular-nums; }

.mono { font-family: var(--font-mono); }

/* Accessible focus ring everywhere */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Thin, on-brand scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--subtle); background-clip: content-box; }

/* Generic skeleton shimmer (shared) */
.hpp-skeleton,
.admin-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg-elevated) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: hpp-shimmer 1.2s infinite linear;
  border-radius: var(--r-sm);
}
@keyframes hpp-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Entrance helpers (staggered reveals) */
@keyframes hpp-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.hpp-rise { animation: hpp-rise var(--dur) var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}