/* ============================================
   KRAZFRAME COLOR PALETTE
   ============================================
   Standardized color system using CSS custom properties.
   All colors used across the site are defined here.
   Use var(--color-name) throughout the codebase.
   ============================================ */

:root {
    /* Brand meta variable for tests expecting --color-brand */
    --color-brand: var(--color-primary);
    /* ========== PRIMARY BRAND COLORS ========== */
    --color-primary: #C8102E;              /* Krazframe signature red */
    --color-primary-dark: #a00d25;         /* Darker shade for hover states */
    --color-primary-darker: #a00d26;       /* Even darker variant */
    --color-primary-light: #d9534f;        /* Lighter red for accents */
    --color-primary-hover: #c9302c;        /* Hover state for primary buttons */
    
    /* Primary with opacity */
    --color-primary-transparent-5: rgba(200, 16, 46, 0.05);
    --color-primary-transparent-10: rgba(200, 16, 46, 0.1);
    --color-primary-transparent-12: rgba(200, 16, 46, 0.12);
    --color-primary-transparent-20: rgba(200, 16, 46, 0.2);
    --color-primary-transparent-40: rgba(200, 16, 46, 0.4);
    --color-primary-transparent-95: rgba(200, 16, 46, 0.95);
    
    /* Primary light variants with opacity */
    --color-primary-light-transparent-10: rgba(217, 83, 79, 0.1);
    --color-primary-light-transparent-15: rgba(217, 83, 79, 0.15);
    --color-primary-light-transparent-30: rgba(217, 83, 79, 0.3);
    --color-primary-light-opaque: rgba(217, 83, 79, 1);
    
    /* ========== SECONDARY ACCENT COLORS ========== */
    --color-accent-coral: #FF6F61;         /* Coral accent for highlights */
    --color-accent-red-muted: #cc5544;     /* Muted red accent */
    --color-accent-red-alt: #aa4433;       /* Alternative red accent */
    
    /* ========== SUCCESS & STATUS COLORS ========== */
    --color-success: #5cb85c;              /* Success green */
    --color-success-dark: #4cae4c;         /* Darker success green */
    --color-success-darkest: #45a049;      /* Darkest success green */
    --color-success-vibrant: #4CAF50;      /* Vibrant green */
    --color-success-light: #9effb3;        /* Light success green */
    --color-success-transparent-15: rgba(92, 184, 92, 0.15);
    --color-success-transparent-30: rgba(92, 184, 92, 0.3);
    
    --color-warning: #ffc107;              /* Warning yellow (used in PHP) */
    
    --color-error-light: #ff6b6b;          /* Light error red */
    --color-error-muted: #8b2e2e;          /* Muted error red */
    --color-error-pink: #ff9999;           /* Pink error variant */
    
    --color-info-blue: rgba(33, 150, 243, 0.95);  /* Info blue */
    
    /* ========== BACKGROUND COLORS ========== */
    --color-bg-body: #0d0d0d;              /* Main body background (darkest) */
    --color-bg-elevated: #101010;          /* Slightly elevated surfaces */
    --color-bg-primary: #1a1a1a;           /* Primary container background */
    --color-bg-secondary: #222;            /* Secondary background */
    --color-bg-tertiary: #262626;          /* Tertiary background */
    --color-bg-card: #2a2a2a;              /* Card/panel background */
    --color-bg-elevated-card: #2d2d2d;     /* Elevated card background */
    --color-bg-hover: #333;                /* Hover state background */
    --color-bg-input: #3a3a3a;             /* Input field background */
    --color-bg-button: #444;               /* Button background */
    --color-bg-button-hover: #555;         /* Button hover background */
    --color-bg-disabled: #666;             /* Disabled element background */
    
    /* Background variants */
    --color-bg-error: #2d1a1a;             /* Error background */
    --color-bg-dark-red: #2a1a1a;          /* Dark red background */
    
    /* ========== BORDER COLORS ========== */
    --color-border-primary: #333;          /* Primary border color */
    --color-border-secondary: #2a2a2a;     /* Secondary border color */
    --color-border-tertiary: #3a3a3a;      /* Tertiary border color */
    --color-border-light: #444;            /* Light border */
    --color-border-lighter: #555;          /* Lighter border */
    --color-border-lightest: #666;         /* Lightest border */
    --color-border-subtle: #888;           /* Subtle border */
    
    /* ========== TEXT COLORS ========== */
    --color-text-primary: #fff;            /* Primary white text */
    --color-text-secondary: #e0e0e0;       /* Secondary light text */
    --color-text-tertiary: #f5f5f5;        /* Tertiary very light text */
    --color-text-bright: #d0d0d0;          /* Bright text variant */
    --color-text-muted: #ccc;              /* Muted text */
    --color-text-muted-dark: #bbb;         /* Darker muted text */
    --color-text-muted-darker: #aaa;       /* Even darker muted text */
    --color-text-subtle: #999;             /* Subtle text */
    --color-text-subtle-dark: #888;        /* Dark subtle text */
    --color-text-disabled: #777;           /* Disabled text (used in PHP) */
    --color-text-placeholder: #666;        /* Placeholder text */
    
    /* Text with opacity */
    --color-text-white-transparent-65: rgba(255, 255, 255, 0.65);
    --color-text-white-transparent-70: rgba(255, 255, 255, 0.7);
    --color-text-white-transparent-75: rgba(255, 255, 255, 0.75);
    
    /* ========== GRADIENT COLORS ========== */
    --gradient-card: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    --gradient-card-alt: linear-gradient(135deg, #222 0%, #1a1a1a 100%);
    --gradient-loading: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    --gradient-overlay-dark: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    --gradient-overlay-darker: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
    --gradient-primary: linear-gradient(135deg, rgba(200, 16, 46, 0.12) 0%, rgba(200, 16, 46, 0.05) 100%);
    --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  /* For future use */
    --gradient-green: linear-gradient(90deg, #4CAF50, #8BC34A);  /* Used in email.php */
    
    /* ========== SHADOW COLORS ========== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 10px 20px rgba(217, 83, 79, 0.1);
    --shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 4px 12px rgba(200, 16, 46, 0.4);
    --shadow-primary-light: 0 4px 12px rgba(217, 83, 79, 0.2);
    --shadow-primary-hover: 0 5px 15px rgba(217, 83, 79, 0.3);
    --shadow-button: 0 5px 15px rgba(85, 85, 85, 0.3);
    
    /* ========== OVERLAY COLORS ========== */
    --overlay-light: rgba(0, 0, 0, 0.2);
    --overlay-medium: rgba(0, 0, 0, 0.3);
    --overlay-dark: rgba(0, 0, 0, 0.4);
    --overlay-darker: rgba(0, 0, 0, 0.5);
    --overlay-darkest: rgba(0, 0, 0, 0.6);
    --overlay-modal: rgba(0, 0, 0, 0.8);
    --overlay-full: rgba(0, 0, 0, 0.9);
    
    --overlay-white-light: rgba(255, 255, 255, 0.2);
    --overlay-white-subtle: rgba(255, 255, 255, 0.05);
    
    /* ========== SPECIAL PURPOSE COLORS ========== */
    --color-tap-highlight: rgba(200, 16, 46, 0.2);  /* Mobile tap highlight */
    
    /* Admin-specific colors */
    --color-admin-health-pass: #2ecc71;
    --color-admin-health-pass-bg: rgba(46, 204, 113, 0.2);
    --color-admin-health-warn: #f1c40f;
    --color-admin-health-warn-bg: rgba(241, 196, 15, 0.2);
    --color-admin-health-fail: #e74c3c;
    --color-admin-health-fail-bg: rgba(231, 76, 60, 0.2);
    --color-admin-status-inactive: #95a5a6;
    --color-admin-status-inactive-bg: rgba(149, 165, 166, 0.15);
    
    /* Email-specific colors (from email.php) */
    --color-email-blue: #007bff;
    --color-email-blue-dark: #0056b3;
    --color-email-red: #dc3545;
    --color-email-gray: #6c757d;
    --color-email-background: #1f2937;
    
    /* Other special colors found in codebase */
    --color-light-bg: #f0f0f0;  /* Light mode background (used in some embeds) */
}

/* ========== REDESIGN FOUNDATION TOKENS ==========
   Added for the 2026 visual refresh. Warmer-tinted palette + indie type
   stack. These are the canonical tokens for new/refactored CSS; the older
   --color-bg-* / --color-text-* tokens above remain valid for code that
   has not been migrated yet. Both sets coexist during the refresh. */
:root {
    /* Warm-tinted dark surfaces (slight red/brown shift vs pure grey) */
    --bg-warm: #0d0c0b;            /* canvas — warmer than --color-bg-body */
    --bg-warm-elevated: #131110;   /* elevated surfaces (header bg, sidebars) */
    --card-warm: #1a1614;          /* card background */
    --card-warm-hover: #221d1a;    /* card hover background */

    /* Warm-tinted ink (newsprint feel, not pure white) */
    --ink: #f4ede2;                /* primary text */
    --ink-dim: #aaa098;            /* secondary text */
    --ink-faint: #6b655e;          /* muted / hint text */

    /* Warm-tinted borders (low-alpha cream over dark) */
    --border-warm: rgba(255, 240, 220, 0.07);
    --border-warm-strong: rgba(255, 240, 220, 0.14);

    /* Accent palette */
    --accent-yellow: #f5c842;      /* fire/lit/highlight */
    --accent-green: #4ade80;       /* success/online/galleries */
    --paper: #ede4d2;              /* "printed paper" accent for text-post badges */

    /* Brand red — alias to the existing --color-primary */
    --red: var(--color-primary);
    --red-deep: var(--color-primary-dark);

    /* Type stack — Anton (display), Bricolage Grotesque (headlines),
       Space Mono (microcopy/stats), Inter (body). System fallbacks
       included so text doesn't disappear if Google Fonts hangs. */
    --font-display:  'Anton', Impact, 'Arial Narrow Bold', sans-serif;
    --font-headline: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    --font-mono:     'Space Mono', 'Courier New', monospace;
    --font-body:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ========== LEGACY COLOR SUPPORT ========== */
/* These are duplicates using older naming patterns found in the codebase.
   Gradually migrate to the semantic names above. */
:root {
    --red-primary: var(--color-primary);
    --red-dark: var(--color-primary-dark);
    --red-light: var(--color-primary-light);
    
    --green-success: var(--color-success);
    --yellow-warning: var(--color-warning);
    
    --bg-dark: var(--color-bg-body);
    --bg-darker: var(--color-bg-primary);
    --bg-card: var(--color-bg-card);
    
    --text-white: var(--color-text-primary);
    --text-light: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
}

/* ========== USAGE NOTES ========== */
/*
  
  PREFERRED USAGE:
  ----------------
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
  box-shadow: var(--shadow-md);
  
  GRADIENTS:
  ----------
  background: var(--gradient-card);
  
  OVERLAYS:
  ---------
  background: var(--overlay-dark);
  
  HOVER STATES:
  -------------
  background: var(--color-primary);
  &:hover {
      background: var(--color-primary-hover);
  }
  
*/