/**
 * Design Tokens — Doghouse Agency Dark Theme
 * All design values as CSS custom properties with --site- prefix
 * Imported into all stylesheets; source of truth for brand values
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Space+Mono:wght@400&display=swap');

:root {
  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font families */
  --site-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --site-font-mono: monospace;

  /* Font weights */
  --site-fw-regular: 400;
  --site-fw-semibold: 600;
  --site-fw-bold: 700;
  --site-fw-extrabold: 800;

  /* Heading scales */
  --site-h1-font-size: clamp(3rem, 6vw, 6rem);
  --site-h1-font-weight: var(--site-fw-extrabold);
  --site-h1-line-height: 0.95;
  --site-h1-letter-spacing: -0.03em;

  --site-h2-font-size: 2rem;
  --site-h2-font-weight: var(--site-fw-extrabold);
  --site-h2-line-height: 1.2;

  --site-h3-font-size: 1.375rem;
  --site-h3-font-weight: var(--site-fw-bold);
  --site-h3-line-height: 1.3;

  --site-h4-font-size: 1.125rem;
  --site-h4-font-weight: var(--site-fw-bold);
  --site-h4-line-height: 1.3;

  --site-h5-font-size: 1.125rem;
  --site-h5-font-weight: var(--site-fw-bold);
  --site-h5-line-height: 1.4;

  --site-h6-font-size: 1rem;
  --site-h6-font-weight: var(--site-fw-bold);
  --site-h6-line-height: 1.4;

  /* Body text */
  --site-body-font-size: 1rem;
  --site-body-font-weight: var(--site-fw-regular);
  --site-body-line-height: 1.6;

  /* Lead text (intro paragraphs, emphasis) */
  --site-lead-font-size: 1.05rem;
  --site-lead-font-weight: var(--site-fw-regular);
  --site-lead-line-height: 1.7;

  /* Label/small text (form labels, captions, breadcrumbs, monospace) */
  --site-label-font-size: 0.875rem;
  --site-label-font-weight: var(--site-fw-regular);
  --site-label-line-height: 1.3;

  /* ========================================
     COLOR PALETTE — BACKGROUND & SURFACE
     ======================================== */

  /* Primary background (page body) */
  --site-color-bg-primary: #14121D;

  /* Secondary surface (cards, sections, modals) */
  --site-color-bg-surface: #1A1B2E;

  /* Mid-tone surface (media panels, inset backgrounds) */
  --site-color-bg-surface-mid: #201E2A;

  /* Header background (translucent with blur) */
  --site-color-bg-header: rgba(13, 11, 17, 0.85);

  /* Card surface (elevated cards, nested elements) */
  --site-color-bg-surface-card: #1C1A25;

  /* ========================================
     COLOR PALETTE — BORDERS
     ======================================== */

  /* Subtle dividers */
  --site-color-border-subtle: #1E1C2A;

  /* Standard borders */
  --site-color-border: #2A2B3D;

  /* Bright/prominent borders */
  --site-color-border-bright: #3A3B5A;

  /* ========================================
     COLOR PALETTE — TEXT
     ======================================== */

  /* Headings (highest contrast) */
  --site-color-text-heading: #E6E0F0;

  /* Lead/emphasis text */
  --site-color-text-lead: #CBC3D8;

  /* Body text (readable on dark background) */
  --site-color-text-body: #9CA3AF;

  /* Labels, secondary text */
  --site-color-text-label: #6B7280;

  /* Pure white (rare, for high emphasis) */
  --site-color-text-white: #FFFFFF;

  /* ========================================
     COLOR PALETTE — SEMANTIC & ACCENT
     ======================================== */

  /* White (background/accent) */
  --site-color-white: #FFFFFF;

  /* Primary accent (teal) */
  --site-color-primary: #18AFAD;
  --site-color-primary-hover: #138B89;
  --site-color-primary-active: #0F6B69;

  /* Secondary accent (purple) */
  --site-color-secondary: #9B6DFF;
  --site-color-secondary-hover: #7E52FF;
  --site-color-secondary-active: #6139FF;

  /* Status colors */
  --site-color-success: #28c840;
  --site-color-success-light: #d4edda;
  --site-color-success-dark: #1e7e34;

  --site-color-warning: #ffbd2e;
  --site-color-warning-light: #fff3cd;
  --site-color-warning-dark: #664d03;

  --site-color-error: #ff5f57;
  --site-color-error-light: #f8d7da;
  --site-color-error-dark: #842029;

  /* Alert/negative (red) */
  --site-color-red: #F03C2E;
  --site-color-red-hover: #D82A1A;

  /* Accent colors */
  --site-color-coral: #FE4A49;
  --site-color-amber: #FB923C;
  --site-color-pink: #ffaceb;

  /* ========================================
     SPACING SCALE
     ======================================== */

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

  /* ========================================
     BORDER RADIUS
     ======================================== */

  --site-radius-base: 0.375rem;
  --site-radius-sm: 0.25rem;
  --site-radius-lg: 0.5rem;
  --site-radius-btn: 8px;
  --site-radius-full: 9999px;

  /* ========================================
     TRANSITIONS & ANIMATIONS
     ======================================== */

  --site-transition-base: 0.2s ease;
  --site-transition-slow: 0.3s ease;
  --site-transition-fast: 0.1s ease;

  /* ========================================
     SHADOW SYSTEM (dark theme appropriate)
     ======================================== */

  --site-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --site-shadow-base: 0 4px 6px rgba(0, 0, 0, 0.4);
  --site-shadow-md: 0 10px 15px rgba(0, 0, 0, 0.5);
  --site-shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.6);
  --site-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.7);

  /* ========================================
     LAYOUT CONSTRAINTS
     ======================================== */

  --site-container-max-width: 1280px;
  --site-container-padding: var(--site-space-lg);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */

  --site-z-base: 0;
  --site-z-dropdown: 100;
  --site-z-sticky: 200;
  --site-z-fixed: 300;
  --site-z-modal-backdrop: 400;
  --site-z-modal: 500;
  --site-z-tooltip: 600;

  /* ========================================
     BREAKPOINTS (mobile-first, min-width)
     ======================================== */

  /* These are referenced in media queries */
  --site-breakpoint-sm: 576px;
  --site-breakpoint-md: 768px;
  --site-breakpoint-lg: 992px;
  --site-breakpoint-xl: 1200px;
  --site-breakpoint-2xl: 1408px;

  /* ========================================
     TABLE SYSTEM (comparison + data tables)
     ======================================== */

  --site-color-table-border: var(--site-color-border);
  --site-color-table-header-label: var(--site-color-text-label);
  --site-color-table-row-hover: rgba(255, 255, 255, 0.02);
  /* Highlight colours are resolved inline in the component using --dh-accent
   * directly, since custom properties chained through :root don't inherit
   * ancestor-scoped values like --dh-accent (set by .doghouse-node--accent-*
   * from field_accent_color). Fallback: --site-color-red. */
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
  :root {
    --site-transition-base: 0s;
    --site-transition-slow: 0s;
    --site-transition-fast: 0s;
  }
}