/*
 * File: assets/css/tokens.css, the printncopy color, type and scale tokens.
 * Purpose: declares the light set, the dark set under [data-theme="dark"] with the same property names, and the shared
 * brand, white, black, alpha, font, spacing, radius and motion tokens every sheet reads; stored colors print after it.
 * Defines: the custom properties of the 2 color sets and of the shared scales on :root
 * Doc: docs/notes/client-sites/printncopyglobal.com/assets/themes/printncopy/assets/css/tokens.css.md
 */

:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #fafaf7;
  --bg-alt: #f1efea;
  --panel: #ffffff;
  --line: #e0dcd3;
  --line-strong: #c9c3b6;
  --text: #1a2332;
  --text-2: #5a6577;
  --text-3: #5f6b7a;
  --inverse-bg: #0f1825;
  --inverse-text: #ffffff;
  --focus: #1e3a5f;
  --btn-dark-fill: #0f1825;
  --btn-dark-hover: #1a2332;
  --rail-bg: #0f1825;
  --footer-bg: #0f1825;
  --shadow-xs: 0 1px 2px rgba(15, 24, 37, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 24, 37, 0.08);
  --shadow-md: 0 6px 18px rgba(15, 24, 37, 0.1);
  --shadow-lg: 0 12px 36px rgba(15, 24, 37, 0.14);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1825;
  --bg-alt: #162033;
  --panel: #1a2332;
  --line: #2c3a50;
  --line-strong: #5a6577;
  --text: #ffffff;
  --text-2: #c9d0db;
  --text-3: #94a0b0;
  --inverse-bg: #ffffff;
  --inverse-text: #0f1825;
  --focus: #ffffff;
  --btn-dark-fill: #2c3a50;
  --btn-dark-hover: #3a4a63;
  --rail-bg: #162033;
  --footer-bg: #0a111b;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.55);
}

:root {
  --pnc-navy: #1e3a5f;
  --pnc-navy-dark: #142847;
  --pnc-red: #d9362c;
  --pnc-red-dark: #b5251d;
  --pnc-charcoal: #0f1825;
  --accent: #d9362c;
  --accent-hover: #b5251d;
  --on-accent: #ffffff;
  --white: #ffffff;
  --black: #000000;
  /* The dark --bg-alt is a dark fill; a light button hovers to this light fill in dark mode under its black text. */
  --btn-light-hover: #f1efea;
  /* The 1 overlay of every photo hero: the dark navy at 72 percent, white text over it. */
  --hero-overlay: rgba(20, 40, 71, 0.72);
  --hero-underline: rgba(255, 255, 255, 0.5);
  /* The upload modal overlay: the charcoal at 55 percent under the panel card. */
  --modal-overlay: rgba(15, 24, 37, 0.55);
  --rail-link: rgba(255, 255, 255, 0.86);
  /* White at an alpha over the footer fill, the same in both modes. */
  --footer-text: rgba(255, 255, 255, 0.8);
  --footer-text-soft: rgba(255, 255, 255, 0.72);
  --footer-text-muted: rgba(255, 255, 255, 0.66);
  --footer-text-faint: rgba(255, 255, 255, 0.62);
  --footer-underline: rgba(255, 255, 255, 0.4);
  --footer-rule: rgba(255, 255, 255, 0.12);
  --footer-rule-faint: rgba(255, 255, 255, 0.08);
  --footer-card-fill: rgba(255, 255, 255, 0.04);
  --footer-strip-fill: rgba(0, 0, 0, 0.22);

  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --transition: 200ms ease;
  --transition-slow: 380ms cubic-bezier(0.16, 1, 0.3, 1);

  --container-max: 1200px;
  --header-height: 70px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms linear;
    --transition-slow: 0ms linear;
  }
}