/**
 * PTN Original - Professional Color Palette
 * Light Mode Minimal Design System
 * CSS Variables for Easy Implementation
 */
:root {
  /* ============================================
     PRIMARY COLORS - PTN Red
     ============================================ */
  --ptn-red: #DC2626;
  --ptn-red-rgb: 220, 38, 38;
  --ptn-red-light: #FEE2E2;
  --ptn-red-light-rgb: 254, 226, 226;
  --ptn-red-dark: #991B1B;
  --ptn-red-dark-rgb: 153, 27, 27;

  /* ============================================
     SECONDARY COLORS - PTN Black
     ============================================ */
  --ptn-black: #1F2937;
  --ptn-black-rgb: 31, 41, 55;
  --ptn-black-dark: #111827;
  --ptn-black-dark-rgb: 17, 24, 39;
  --ptn-black-light: #6B7280;
  --ptn-black-light-rgb: 107, 114, 128;
  --ptn-black-subtle: #F3F4F6;
  --ptn-black-subtle-rgb: 243, 244, 246;

  /* ============================================
     ACCENT COLORS - Green (Success/Authenticity)
     ============================================ */
  --ptn-green: #10B981;
  --ptn-green-rgb: 16, 185, 129;
  --ptn-green-dark: #059669;
  --ptn-green-dark-rgb: 5, 150, 105;
  --ptn-green-light: #D1FAE5;
  --ptn-green-light-rgb: 209, 250, 229;

  /* ============================================
     ACCENT COLORS - Blue (Trust/Quality)
     ============================================ */
  --ptn-blue: #030e20;
  --ptn-blue-rgb: 59, 130, 246;
  --ptn-blue-dark: #2563EB;
  --ptn-blue-dark-rgb: 37, 99, 235;
  --ptn-blue-light: #DBEAFE;
  --ptn-blue-light-rgb: 219, 234, 254;

  /* ============================================
     NEUTRAL COLORS
     ============================================ */
  --white: #FFFFFF;
  --white-rgb: 255, 255, 255;
  --off-white: #f7f5f5;
  --off-white-rgb: 250, 250, 250;
  --gray-light: #E5E7EB;
  --gray-light-rgb: 229, 231, 235;
  --gray-medium: #9CA3AF;
  --gray-medium-rgb: 156, 163, 175;
  --gray-dark: #374151;
  --gray-dark-rgb: 55, 65, 81;

  /* ============================================
     STATUS COLORS
     ============================================ */
  --warning: #F59E0B;
  --warning-rgb: 245, 158, 11;
  --warning-light: #FEF3C7;
  --warning-light-rgb: 254, 243, 199;
  --error: #EF4444;
  --error-rgb: 239, 68, 68;
  --error-light: #FEE2E2;
  --error-light-rgb: 254, 226, 226;
  --info: #3B82F6;
  --info-rgb: 59, 130, 246;
  --info-light: #DBEAFE;
  --info-light-rgb: 219, 234, 254;
  --success: #10B981;
  --success-rgb: 16, 185, 129;
  --success-light: #D1FAE5;
  --success-light-rgb: 209, 250, 229;

  /* ============================================
     SEMANTIC COLOR MAPPINGS
     ============================================ */
  
  /* Primary Brand */
  --color-primary: var(--ptn-red);
  --color-primary-rgb: var(--ptn-red-rgb);
  --color-primary-light: var(--ptn-red-light);
  --color-primary-dark: var(--ptn-red-dark);

  /* Secondary Brand */
  --color-secondary: var(--ptn-black);
  --color-secondary-rgb: var(--ptn-black-rgb);
  --color-secondary-light: var(--ptn-black-light);
  --color-secondary-subtle: var(--ptn-black-subtle);

  /* Accent Colors */
  --color-accent-green: var(--ptn-green);
  --color-accent-green-light: var(--ptn-green-light);
  --color-accent-blue: var(--ptn-blue);
  --color-accent-blue-light: var(--ptn-blue-light);

  /* ============================================
     TYPOGRAPHY COLORS
     ============================================ */
  --text-primary: var(--ptn-black);
  --text-secondary: var(--ptn-black-light);
  --text-tertiary: var(--gray-medium);
  --text-heading: var(--ptn-black-dark);
  --text-link: var(--ptn-blue);
  --text-link-hover: var(--ptn-blue-dark);
  --text-on-primary: var(--white);
  --text-on-dark: var(--white);

  /* ============================================
     BACKGROUND COLORS
     ============================================ */
  --bg-primary: var(--white);
  --bg-secondary: var(--off-white);
  --bg-tertiary: var(--ptn-black-subtle);
  --bg-card: var(--white);
  --bg-card-alt: var(--off-white);
  --bg-accent-red: var(--ptn-red-light);
  --bg-accent-green: var(--ptn-green-light);
  --bg-accent-blue: var(--ptn-blue-light);

  /* ============================================
     BORDER COLORS
     ============================================ */
  --border-primary: var(--gray-light);
  --border-secondary: var(--gray-medium);
  --border-accent: var(--ptn-red);
  --border-subtle: var(--ptn-black-subtle);
  --border-focus: var(--ptn-blue);

  /* ============================================
     BUTTON COLORS
     ============================================ */
  /* Primary Button */
  --btn-primary-bg: var(--ptn-red);
  --btn-primary-text: var(--white);
  --btn-primary-hover: var(--ptn-red-dark);
  --btn-primary-active: var(--ptn-red-dark);
  --btn-primary-disabled-bg: var(--gray-light);
  --btn-primary-disabled-text: var(--gray-medium);

  /* Secondary Button */
  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--ptn-black);
  --btn-secondary-border: var(--gray-light);
  --btn-secondary-hover: var(--ptn-black-subtle);
  --btn-secondary-active: var(--gray-light);

  /* Accent Button - Green */
  --btn-accent-green-bg: var(--ptn-green);
  --btn-accent-green-text: var(--white);
  --btn-accent-green-hover: var(--ptn-green-dark);

  /* Accent Button - Blue */
  --btn-accent-blue-bg: var(--ptn-blue);
  --btn-accent-blue-text: var(--white);
  --btn-accent-blue-hover: var(--ptn-blue-dark);

  /* ============================================
     SHADOW COLORS
     ============================================ */
  --shadow-color: rgba(31, 41, 55, 0.08);
  --shadow-color-subtle: rgba(31, 41, 55, 0.05);
  --shadow-color-medium: rgba(31, 41, 55, 0.1);
  --shadow-color-large: rgba(31, 41, 55, 0.12);
  --shadow-color-xl: rgba(31, 41, 55, 0.15);

  /* ============================================
     SHADOW VALUES
     ============================================ */
  --shadow-subtle: 0 1px 2px var(--shadow-color-subtle);
  --shadow-default: 0 1px 3px var(--shadow-color);
  --shadow-medium: 0 4px 6px var(--shadow-color-medium);
  --shadow-large: 0 10px 15px var(--shadow-color-large);
  --shadow-xl: 0 20px 25px var(--shadow-color-xl);

  /* ============================================
     INTERACTIVE STATES
     ============================================ */
  --focus-ring: 2px solid var(--ptn-blue);
  --focus-ring-offset: 2px;
  --transition-base: 150ms ease-in-out;
  --transition-fast: 100ms ease-in-out;
  --transition-slow: 250ms ease-in-out;

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Background Colors */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }
.bg-card { background-color: var(--bg-card); }
.bg-red-light { background-color: var(--ptn-red-light); }
.bg-green-light { background-color: var(--ptn-green-light); }
.bg-blue-light { background-color: var(--ptn-blue-light); }

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-heading { color: var(--text-heading); }
.text-link { color: var(--text-link); }
.text-on-primary { color: var(--text-on-primary); }

/* Border Colors */
.border-primary { border-color: var(--border-primary); }
.border-secondary { border-color: var(--border-secondary); }
.border-accent { border-color: var(--border-accent); }

/* Shadow Utilities */
.shadow-subtle { box-shadow: var(--shadow-subtle); }
.shadow-default { box-shadow: var(--shadow-default); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-large { box-shadow: var(--shadow-large); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Button Styles */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  transition: background-color var(--transition-base);
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover);
}

.btn-primary:active {
  background-color: var(--btn-primary-active);
}

.btn-primary:disabled {
  background-color: var(--btn-primary-disabled-bg);
  color: var(--btn-primary-disabled-text);
  cursor: not-allowed;
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  /* color: var(--btn-secondary-text); */
  border: 1px solid var(--btn-secondary-border);
  transition: background-color var(--transition-base);
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-hover);
}

.btn-secondary:active {
  background-color: var(--btn-secondary-active);
}

/* Focus States */
*:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Card Styles */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-default);
  transition: box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-medium);
}