/* ==========================================================================
   Doguard Color System — single source of truth
   Industrial B2B: charcoal structure · muted steel · copper amber CTA
   Load this FIRST so later sheets inherit one palette.
   ========================================================================== */

:root {
  /* Structure (dark chrome) */
  --color-ink: #0a1018;
  --color-charcoal: #101820;
  --color-slate: #1a2433;
  --color-slate-mid: #2a3648;

  /* Brand accents */
  --color-steel: #3f6f9a;          /* muted industrial steel-blue */
  --color-steel-hover: #325a7e;
  --color-steel-soft: #e8eef4;
  --color-amber: #d97706;          /* copper / safety amber */
  --color-amber-hover: #b45309;
  --color-amber-soft: #fff4e5;
  --color-copper: #e8a15a;         /* phone / highlight on dark */

  /* Surfaces */
  --color-surface: #f4f6f8;
  --color-surface-alt: #e9eef3;
  --color-surface-card: #ffffff;
  --color-border: #d5dde6;
  --color-border-strong: #b8c4d1;

  /* Text */
  --color-text: #15202b;
  --color-text-muted: #5b6b7c;
  --color-muted: var(--color-text-muted);
  --color-text-inverse: #f3f6f9;
  --color-text-on-dark: rgba(243, 246, 249, 0.78);
  --color-text-on-dark-soft: rgba(243, 246, 249, 0.55);

  /* Status */
  --color-success: #2f7d4a;
  --color-danger: #c23b2e;
  --color-warning: #c47a12;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(16, 24, 32, 0.06);
  --shadow-md: 0 12px 28px rgba(16, 24, 32, 0.1);
  --shadow-glow: 0 0 0 1px rgba(63, 111, 154, 0.12), 0 14px 32px rgba(16, 24, 32, 0.1);

  /* Overlays on photography */
  --overlay-hero: linear-gradient(
    105deg,
    rgba(10, 16, 24, 0.72) 0%,
    rgba(10, 16, 24, 0.4) 52%,
    rgba(10, 16, 24, 0.22) 100%
  );
  --overlay-page: linear-gradient(
    115deg,
    rgba(10, 16, 24, 0.9) 0%,
    rgba(10, 16, 24, 0.72) 50%,
    rgba(10, 16, 24, 0.66) 100%
  );

  /* Texture — quieter grid, less neon blue */
  --grid-line: rgba(63, 111, 154, 0.045);
  --texture:
    radial-gradient(ellipse 70% 45% at 8% -8%, rgba(63, 111, 154, 0.06), transparent 55%),
    radial-gradient(ellipse 50% 35% at 100% 0%, rgba(217, 119, 6, 0.04), transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 47px, var(--grid-line) 47px, var(--grid-line) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, var(--grid-line) 47px, var(--grid-line) 48px);

  /* RGB channels for rgba()/color-mix */
  --rgb-ink: 10, 16, 24;
  --rgb-charcoal: 16, 24, 32;
  --rgb-steel: 63, 111, 154;
  --rgb-amber: 217, 119, 6;
  --rgb-copper: 232, 161, 90;
  --rgb-surface: 244, 246, 248;
  --rgb-surface-alt: 233, 238, 243;

  --radius: 4px;
  --radius-lg: 8px;
  --header-h: 100px;
}