/*==============================================
    OTTO Laravel - Centralized Color System
    All colors used in the project
    Change colors here to update theme globally
===============================================*/

:root {
  /* ========================================
     PRIMARY BRAND COLORS
     ======================================== */
  --otto-primary: #FFD25D;
  --otto-primary-rgb: 255, 210, 93;
  
  /* ========================================
     BACKGROUND COLORS
     ======================================== */
  --otto-bg-dark: #000000;
  --otto-bg-dark-rgb: 11, 25, 44;
  --otto-bg-darker: #000000;
  --otto-bg-medium: #0C182C;
  --otto-bg-blue-dark: #083174;
  --otto-bg-navy: #11223D;
  --otto-bg-slate: #213152;
  --otto-bg-gray-blue: #38445A;
  --otto-bg-dark-slate: #445366;
  
  /* ========================================
     TEXT & CONTENT COLORS
     ======================================== */
  --otto-text-gray: #C5C8CD;
  --otto-text-gray-rgb: 197, 200, 205;
  --otto-text-medium-gray: #848484;
  --otto-text-dark-blue: #2F4858;
  --otto-text-navy: #05173D;
  
  /* ========================================
     WHITE SHADES
     ======================================== */
  --otto-white: #ffffff;
  --otto-white-rgb: 255, 255, 255;
  --otto-white-off: #E7E7E7;
  
  /* ========================================
     GRADIENT COLORS - Blue Tones
     ======================================== */
  --otto-gradient-blue-start: #5CB0E9;
  --otto-gradient-blue-end: #3D72FC;
  --otto-gradient-purple-blue: #8F88FF;
  --otto-gradient-indigo: #5159e4;
  --otto-gradient-blue-deep: #160EFF;
  
  /* ========================================
     GRADIENT COLORS - Pink/Red Tones
     ======================================== */
  --otto-gradient-pink: #3224fb;
  --otto-gradient-pink-dark: #FF3C5F;
  --otto-gradient-pink-deep: #E81655;
  --otto-gradient-red: #565CE6;
  
  /* ========================================
     ACCENT COLORS
     ======================================== */
  --otto-accent-purple: #6669D8;
  --otto-accent-purple-rgb: 102, 105, 216;
  --otto-accent-magenta: #D866D4;
  --otto-accent-magenta-rgb: 216, 102, 214;
  --otto-accent-pink: #FA5674;
  --otto-accent-pink-rgb: 250, 86, 116;
  
  /* ========================================
     BORDER COLORS
     ======================================== */
  --otto-border-navy: #00224f;
  
  /* ========================================
     TRANSPARENCY LEVELS - White
     ======================================== */
  /* Use these for overlays, backgrounds with transparency */
  --otto-white-transparent-5: rgba(var(--otto-white-rgb), 0.05);
  --otto-white-transparent-10: rgba(var(--otto-white-rgb), 0.10);
  --otto-white-transparent-12: rgba(var(--otto-white-rgb), 0.12);
  --otto-white-transparent-13: rgba(var(--otto-white-rgb), 0.13);
  --otto-white-transparent-15: rgba(var(--otto-white-rgb), 0.15);
  --otto-white-transparent-19: rgba(var(--otto-white-rgb), 0.19);
  --otto-white-transparent-20: rgba(var(--otto-white-rgb), 0.20);
  --otto-white-transparent-29: rgba(var(--otto-white-rgb), 0.29);
  --otto-white-transparent-50: rgba(var(--otto-white-rgb), 0.50);
  --otto-white-transparent-80: rgba(var(--otto-white-rgb), 0.80);
  
  /* ========================================
     TRANSPARENCY LEVELS - Dark
     ======================================== */
  --otto-dark-transparent-50: rgba(0, 0, 0, 0.50);
  --otto-dark-transparent-70: rgba(var(--otto-bg-dark-rgb), 0.70);
  --otto-dark-transparent-85: rgba(var(--otto-bg-dark-rgb), 0.85);
  --otto-dark-transparent-100: rgba(var(--otto-bg-dark-rgb), 1.0);
  
  /* ========================================
     TRANSPARENCY LEVELS - Primary
     ======================================== */
  --otto-primary-transparent-10: rgba(var(--otto-primary-rgb), 0.10);
  --otto-primary-transparent-40: rgba(var(--otto-primary-rgb), 0.40);
  --otto-primary-transparent-70: rgba(var(--otto-primary-rgb), 0.70);
  --otto-primary-transparent-100: rgba(var(--otto-primary-rgb), 1.0);
  
  /* ========================================
     TRANSPARENCY LEVELS - Accent Colors
     ======================================== */
  --otto-blue-transparent-4: rgba(92, 176, 233, 0.04);
  --otto-blue-transparent-10: rgba(92, 176, 233, 0.10);
  --otto-purple-transparent-5: rgba(143, 136, 255, 0.05);
  --otto-purple-transparent-10: rgba(143, 136, 255, 0.10);
  --otto-purple-transparent-30: rgba(143, 136, 255, 0.30);
  --otto-indigo-transparent-15: rgba(22, 14, 255, 0.1539);
  
  /* ========================================
     GRADIENT BACKGROUNDS
     ======================================== */
  /* Primary Blue Gradient (most common) */
  --otto-gradient-primary: linear-gradient(270deg, var(--otto-gradient-blue-start) 0%, var(--otto-gradient-blue-end) 100%);
  --otto-gradient-primary-reverse: linear-gradient(270deg, var(--otto-gradient-blue-end) 0%, var(--otto-gradient-blue-start) 100%);
  
  /* Pink/Purple Gradient */
  --otto-gradient-pink-purple: linear-gradient(270deg, var(--otto-gradient-pink) 0%, var(--otto-gradient-indigo) 100%);
  --otto-gradient-pink-purple-reverse: linear-gradient(90deg, var(--otto-gradient-indigo), var(--otto-gradient-pink));
  
  /* White Gradient */
  --otto-gradient-white: linear-gradient(270deg, var(--otto-white) 0%, var(--otto-white) 100%);
  
  /* Yellow Gradient */
  --otto-gradient-yellow: linear-gradient(90deg, var(--otto-primary), rgba(255, 210, 93, 0.01));
  
  /* Red/Purple Gradient */
  --otto-gradient-red-purple: linear-gradient(270deg, var(--otto-gradient-pink-dark) 0%, var(--otto-gradient-red) 100%);
  
  /* Border Gradients */
  --otto-gradient-border-blue: linear-gradient(90deg, var(--otto-gradient-blue-end), var(--otto-gradient-blue-start)) border-box;
  --otto-gradient-border-purple: linear-gradient(90deg, var(--otto-gradient-purple-blue), var(--otto-gradient-blue-start)) border-box;
  --otto-gradient-border-pink: linear-gradient(90deg, var(--otto-gradient-indigo), var(--otto-gradient-pink)) border-box;
  --otto-gradient-border-yellow: linear-gradient(90deg, var(--otto-primary), rgba(255, 210, 93, 0.01)) border-box;
  
  /* Radial Gradients for decorative elements */
  --otto-radial-purple: radial-gradient(50% 50% at 50% 50%, var(--otto-accent-purple) 0%, rgba(7, 12, 20, 0) 100%);
  --otto-radial-magenta: radial-gradient(50% 50% at 50% 50%, var(--otto-accent-magenta) 0%, rgba(7, 12, 20, 0) 100%);
  --otto-radial-pink: radial-gradient(50% 50% at 50% 50%, var(--otto-accent-pink-rgb) 0%, rgba(7, 12, 20, 0) 100%);
  --otto-radial-pink-light: radial-gradient(50% 50% at 50% 50%, rgba(var(--otto-accent-pink-rgb), 0.33) 0%, rgba(7, 12, 20, 0) 100%);
  --otto-radial-pink-medium: radial-gradient(50% 50% at 50% 50%, rgba(var(--otto-accent-pink-rgb), 0.63) 0%, rgba(7, 12, 20, 0) 100%);
  --otto-radial-purple-medium: radial-gradient(50% 50% at 50% 50%, rgba(var(--otto-accent-purple-rgb), 0.62) 0%, rgba(7, 12, 20, 0) 100%);
  --otto-radial-magenta-medium: radial-gradient(50% 50% at 50% 50%, rgba(var(--otto-accent-magenta-rgb), 0.62) 0%, rgba(7, 12, 20, 0) 100%);
  --otto-radial-red: radial-gradient(50% 50% at 50% 50%, rgba(232, 22, 85, 0.4) 0%, rgba(7, 12, 20, 0) 100%);
  --otto-radial-blue: radial-gradient(50% 50% at 50% 50%, rgba(22, 14, 255, 0.1539) 0%, rgba(22, 14, 255, 0) 87.1%);
  
  /* Complex Gradients */
  --otto-gradient-counter: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.11)) border-box;
  --otto-gradient-feature: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.11)) border-box;
  --otto-gradient-pricing: linear-gradient(-70deg, rgba(143, 136, 255, 0), var(--otto-gradient-blue-start)) border-box;
  --otto-gradient-about: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
  --otto-gradient-portfolio: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(153, 153, 153, 0) 100%);
  --otto-gradient-process: linear-gradient(180deg, rgba(255, 255, 255, 0.29) 0%, rgba(8, 17, 31, 0) 100%);
  --otto-gradient-sliding-text: linear-gradient(266.69deg, rgba(255, 255, 255, 0.2) 2.9%, rgba(255, 255, 255, 0) 96.45%);
  --otto-gradient-newsletter: linear-gradient(90deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0) 100%);
  --otto-gradient-page-header: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--otto-bg-darker) 100%);
  --otto-gradient-coming-soon: linear-gradient(0deg, var(--otto-bg-darker) 5%, rgba(0, 0, 0, 0.5) 100%);
  
  /* Background Gradients for Sections */
  --otto-gradient-bg-blue: linear-gradient(270deg, var(--otto-blue-transparent-4) 0%, var(--otto-purple-transparent-10) 100%);
  --otto-gradient-bg-blue-light: linear-gradient(270deg, var(--otto-blue-transparent-4) 0%, var(--otto-purple-transparent-5) 100%);
  --otto-gradient-bg-blog: linear-gradient(180deg, var(--otto-blue-transparent-10), var(--otto-purple-transparent-30)) border-box;
  --otto-gradient-bg-contact: linear-gradient(90deg, var(--otto-blue-transparent-4), var(--otto-purple-transparent-5)) border-box;
  
  /* Pricing Card Gradients */
  --otto-gradient-pricing-basic: linear-gradient(157.36deg, var(--otto-bg-medium) 0%, rgba(12, 24, 44, 0.1) 98.82%);
  --otto-gradient-pricing-pro: linear-gradient(157.36deg, var(--otto-bg-blue-dark) 0%, rgba(12, 24, 44, 0.1) 98.82%);
  
  /* ========================================
     SHADOW COLORS
     ======================================== */
  --otto-shadow-light: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
  --otto-shadow-medium: 0px 10px 60px 0px rgba(0, 0, 0, 0.30);
  --otto-shadow-contact: 0px 11px 38px rgba(143, 136, 255, 0.06);
  
  /* ========================================
     LEGACY VARIABLES (for backward compatibility)
     Map to new variable names
     ======================================== */
  --techguru-font: "Space Grotesk", sans-serif;
  --techguru-font-two: "Marcellus", serif;
  --techguru-gray: var(--otto-text-gray);
  --techguru-gray-rgb: var(--otto-text-gray-rgb);
  --techguru-base: var(--otto-primary);
  --techguru-base-rgb: var(--otto-primary-rgb);
  --techguru-black: var(--otto-bg-dark);
  --techguru-black-rgb: var(--otto-bg-dark-rgb);
  --techguru-white: var(--otto-white);
  --techguru-white-rgb: var(--otto-white-rgb);
}

/*==============================================
    USAGE EXAMPLES & NOTES
===============================================

1. For solid colors, use directly:
   background-color: var(--otto-primary);
   color: var(--otto-white);

2. For transparent colors, use pre-defined transparency levels:
   background-color: var(--otto-white-transparent-10);
   
3. For gradients, use pre-defined gradient variables:
   background: var(--otto-gradient-primary);
   
4. For custom transparency on solid colors, use RGB variables:
   background-color: rgba(var(--otto-primary-rgb), 0.25);
   
5. To change theme:
   - Primary color: Change --otto-primary and --otto-primary-rgb
   - Dark mode: Change --otto-bg-dark and related dark colors
   - Accent colors: Change --otto-accent-* colors
   
6. Gradients:
   - All gradients use the base color variables
   - Change base colors to update all gradients automatically

===============================================*/