/* 
  K2 UI – Theming CSS v1.0.0
  k2-theme.css – Design Tokens with Developer Help Comments
  
🔷 2. Theme- k2-theme-red-vibrant
*/

:root {

  /*
  sm  = small phones
  md  = tablets
  lg  = small laptops
  xl  = desktops
  2xl = large desktops
    */  
  --k2-breakpoint-sm: 640px;
  --k2-breakpoint-md: 768px;
  --k2-breakpoint-lg: 1024px;
  --k2-breakpoint-xl: 1280px;
  --k2-breakpoint-2xl: 1536px;


  /**
  * ============================================================================
  * 🧱 K2 Grayscale Palette Usage Guide
  * ----------------------------------------------------------------------------
  * The grayscale palette is used for neutral UI surfaces, borders, disabled
  * states, secondary text, shadows, and subtle UI cues.
  *
  * Grayscale colors should **not be used for semantic meanings** like success,
  * danger, or primary actions. Instead, they provide neutral visual structure.
  *
  * Developers should **reuse these variables** rather than hardcoding hex codes.
  * ============================================================================
  *
  * Usage Guidelines Summary of the above block
  * ----------------------------------------------------------------------------
  * 1️⃣ Use lighter grays (#100–#300) for backgrounds, cards, panels, and subtle dividers.
  * 2️⃣ Use medium grays (#400–#600) for disabled states, secondary text, and icons.
  * 3️⃣ Use dark grays (#700–#900) for primary text, headers, and strong emphasis elements.
  * 4️⃣ Always prefer **CSS variables** to maintain consistent shades across components.
  * 5️⃣ Do not use grayscale for semantic meaning (success, danger, info) — reserve for neutral structure.
  * ============================================================================
  */  
  --k2-color-gray-100: #f5f5f5; /* Light background surfaces */
  --k2-color-gray-200: #e5e5e5; /* Divider lines / horizontal rules */
  --k2-color-gray-300: #d4d4d4; /* Borders for cards, input fields, buttons */
  --k2-color-gray-400: #a3a3a3; /* Disabled buttons / sliders / controls */
  --k2-color-gray-500: #737373; /* Secondary text on light surfaces */
  --k2-color-gray-600: #525252; /* Medium-dark text on light backgrounds */
  --k2-color-gray-700: #404040; /* Primary text on muted backgrounds , Icons with higher visual weight */
  --k2-color-gray-800: #262626; /* Primary text on light backgrounds, Dark UI elements needing contrast */
  --k2-color-gray-900: #171717; /* Darkest text on very light backgrounds, High contrast headers or key UI elements */


  

  /**
  * ============================================================================
  * 🌈 K2 Semantic Color Tokens Usage Guide
  * ----------------------------------------------------------------------------
  * This guide explains how to use **semantic color tokens** across your
  * application for text, backgrounds, buttons, borders, and other UI components.
  *
  * Each color now includes an **“on-color”** variant (e.g. `--k2-color-on-primary`)
  * to define the appropriate **foreground** (text/icon) color that provides
  * optimal contrast against its background.
  *
  * ============================================================================
  * 🎯 Key Principles
  * ----------------------------------------------------------------------------
  * 1️⃣ Use `--k2-color-*` for defining background or base color intent.
  * 2️⃣ Use `--k2-color-on-*` for text, icons, or borders placed **on top of**
  *     that color (e.g. `color: var(--k2-color-on-primary)`).
  * 3️⃣ This pairing ensures accessibility and consistent contrast across all UI
  *     elements — especially useful in dark/light theme scenarios.
  * 4️⃣ Developers should **reuse these variables** rather than hardcoding hex codes.
  *
  * ============================================================================
  * 🧠 Example Usage
  * ----------------------------------------------------------------------------
  * ✅ Example 1 — Section with readable foreground text
  * <section class="k2-section k2-bg-dark">
  *   <h2 style="color: var(--k2-color-on-dark);">Empower Your Future</h2>
  *   <p style="color: var(--k2-color-on-dark);">Join a community of learners and innovators.</p>
  * </section>
  *
  * ✅ Example 2 — Banner using accent surface with readable overlay
  * <div class="k2-banner k2-bg-accent">
  *   <h1 class="k2-text-light">Welcome!</h1>
  *   <p style="color: var(--k2-color-on-accent);">Learn. Build. Innovate.</p>
  * </div>
  *
  * ============================================================================
  */

  /* ============================================================
     BASE COLORS
     ============================================================ */
  --k2-color-light: #f5f7f9;           /* soft light gray background / neutral text contrast */
  --k2-color-on-light: #0f2530;        /* dark text on light surfaces */

  --k2-color-dark: #0f2530;            /* deep blue-teal dark background */
  --k2-color-on-dark: #f5f7f9;         /* light text on dark surfaces */

  /* ============================================================
     BRAND COLORS
     ============================================================ */
  --k2-color-primary: #ec4d37;         /* vivid red – main brand / CTA color */
  --k2-color-on-primary: #ffffff;      /* white text/icons on brand red */

  --k2-color-secondary: #f0c7c1;       /* pastel red – secondary CTA, hover states, highlights */
  --k2-color-on-secondary: #0f2530;    /* dark readable text on pastel red */

  --k2-color-accent: #4fc3f7;          /* tech accent – cyan for small emphasis, links, icons */
  --k2-color-on-accent: #ffffff;       /* dark text/icons for readability over cyan */

  /* ============================================================
     NEUTRAL & SURFACE COLORS
     ============================================================ */
  --k2-color-muted: #f5ebeb;           /* card / sidebar / section background */
  --k2-color-on-muted: #301313;        /* readable text/icons on muted background */

  --k2-color-muted-strong: #f9d8d8;    /* slightly darker neutral for surface contrast */
  --k2-color-on-muted-strong: #301313; /* readable text/icons on stronger muted background */

  --k2-color-border: #d0d5d8;          /* soft gray border, complements muted backgrounds */
  --k2-color-on-border: #0f2530;       /* darker icons/text for use over light borders */

  /* ============================================================
     FEEDBACK STATES
     ============================================================ */
  --k2-color-success: #3ab97a;         /* confident green, balanced for readability */
  --k2-color-on-success: #ffffff;      /* white text/icons on green backgrounds */

  --k2-color-warning: #ffb84d;         /* warm amber, harmonizes with brand reds */
  --k2-color-on-warning: #0f2530;      /* dark readable text/icons on amber background */

  --k2-color-danger: #e23f3f;          /* rich red tone, consistent with brand family */
  --k2-color-on-danger: #ffffff;       /* white text/icons on red backgrounds */

  --k2-color-info: #33b5cc;            /* teal-cyan mix, stands out on dark surfaces */
  --k2-color-on-info: #ffffff;         /* white text/icons on info backgrounds */


/**
  * ============================================================================
   K2 Pastel Color Palette
   Soft, modern hues for section backgrounds and accents.
   Each color has an “on-color” for accessible text contrast.
   We keep this as many sites want to use some of these colors for their surface area
  * ============================================================================
  */  
  --k2-color-green:       #b7e9cc;  /* soft mint green */
  --k2-color-on-green:    #0f2530;

  --k2-color-teal:        #b5ede4;  /* gentle aqua teal */
  --k2-color-on-teal:     #0f2523;

  --k2-color-blue:        #cde5ff;  /* pastel sky blue */
  --k2-color-on-blue:     #0f1d33;

  --k2-color-indigo:      #d6d4ff;  /* soft indigo violet */
  --k2-color-on-indigo:   #1a1530;

  --k2-color-purple:      #e3d6ff;  /* light lilac purple */
  --k2-color-on-purple:   #201533;

  --k2-color-pink:        #ffd8e8;  /* rosy pink tint */
  --k2-color-on-pink:     #301620;

  --k2-color-red:         #ffd4d4;  /* soft coral red */
  --k2-color-on-red:      #301313;

  --k2-color-orange:      #ffe2c6;  /* warm soft orange */
  --k2-color-on-orange:   #301f10;

  --k2-color-yellow:      #fff5c8;  /* pale lemon yellow */
  --k2-color-on-yellow:   #302d10;

  --k2-color-gray:        #e8ecf1;  /* cool light gray */
  --k2-color-on-gray:     #1a1d20;

  --k2-color-sand:        #f6eadf;  /* warm beige neutral */
  --k2-color-on-sand:     #231c15;

    
  
  /**
  * ============================================================================
  * 🎨 K2 Brand & Background Colors Usage Guide
  * ----------------------------------------------------------------------------
  * These variables define background colors for primary surfaces, sections,
  * panels, cards, modals, and accent elements — along with their readable text
  * colors. Each text color references contrast tokens like `--k2-color-on-*`
  * to maintain accessibility and visual balance.
  *
  * ✅ Use `--k2-bg-*` for component background colors
  * ✅ Use `--k2-bg-*-text` for readable text on that background
  *
  * Example Usage:
  * ----------------------------------------------------------------------------
  * <div class="k2-banner k2-bg-accent">
  *   <h1 class="title">Welcome to Techypreneur!</h1>
  *   <p>Empowering students with tech & entrepreneurship.</p>
  * </div>
  *
  * <footer class="k2-bg-dark">
  *   <p>&copy; 2025 Techypreneur. All rights reserved.</p>
  * </footer>
  * ============================================================================
  */
  
  /* ============================================================
     BACKGROUND COLORS WITH AUTOMATIC CONTRAST TEXT
     ============================================================ */
  --k2-bg-primary: var(--k2-color-primary);
  --k2-bg-primary-text: var(--k2-color-on-primary);

  --k2-bg-secondary: var(--k2-color-secondary);
  --k2-bg-secondary-text: var(--k2-color-on-secondary);

  --k2-bg-muted: var(--k2-color-muted);
  --k2-bg-muted-text: var(--k2-color-on-muted);

  --k2-bg-muted-strong: var(--k2-color-muted-strong);
  --k2-bg-muted-strong-text: var(--k2-color-on-muted-strong);

  --k2-bg-light: var(--k2-color-light);
  --k2-bg-light-text: var(--k2-color-on-light);

  --k2-bg-dark: var(--k2-color-dark);
  --k2-bg-dark-text: var(--k2-color-on-dark);

  --k2-bg-accent: var(--k2-color-accent);
  --k2-bg-accent-text: var(--k2-color-on-accent);
  



  /**
  * ============================================================================
  * 🖋️ K2 Typography Tokens
  * ----------------------------------------------------------------------------
  * Defines font families, font scales, and sizing variables for consistent
  * typography across the platform.
  * ============================================================================
  *
  * Usage Guidelines
  * ----------------------------------------------------------------------------
  * 1️⃣ Use `--k2-font-sans` for general UI, body text, headings, and interactive elements.
  * 2️⃣ Use `--k2-font-mono` for code blocks, terminal-like UI, and preformatted text.
  * 3️⃣ Apply font sizes consistently according to the hierarchy:
  *      - Body: `--k2-font-md`
  *      - Subheadings: `--k2-font-lg` to `--k2-font-xl`
  *      - Headings: `--k2-font-2xl` to `--k2-font-8xl` based on prominence
  * 4️⃣ Maintain responsive readability by scaling text with `rem` units.
  * 5️⃣ Avoid hardcoding pixel values; always use defined variables for consistency.
  * ============================================================================
  */  
  --k2-font-sans: 'Inter', system-ui, sans-serif;     /* Default UI font */
  --k2-font-mono: 'SFMono-Regular', Menlo, monospace; /* For code or terminal UI */

  --k2-font-xs: 0.75rem;
  --k2-font-sm: 0.875rem;
  --k2-font-base: 1rem;
  --k2-font-md: var(--k2-font-base);
  --k2-font-lg: 1.125rem;
  --k2-font-xl: 1.25rem;
  --k2-font-2xl: 1.5rem;
  --k2-font-3xl: 1.875rem;
  --k2-font-4xl: 2.25rem;
  --k2-font-5xl: 2.50rem;
  --k2-font-6xl: 2.75rem;
  --k2-font-7xl: 3rem;
  --k2-font-8xl: 3.25rem;


 
  /**
  * ============================================================================
  * 📦 K2 Spacing Tokens
  * ----------------------------------------------------------------------------
  * Defines a consistent spacing scale for margins, paddings, gaps, and layout
  * spacing across the platform.
  *
  * The scale uses `rem` units for responsive, scalable spacing.
  * ============================================================================
  *
  * Usage Guidelines
  * ----------------------------------------------------------------------------
  * 1️⃣ Use these spacing variables consistently for padding, margin, and gap properties.
  * 2️⃣ Prefer lower scale values (0-3) for compact elements like buttons, labels, and icons.
  * 3️⃣ Use mid scale values (4-6) for sections, cards, and larger component spacing.
  * 4️⃣ Use higher scale values (8+) for major layout spacing, such as section separation.
  * 5️⃣ Avoid hardcoding pixel/rem values outside the defined scale to maintain visual consistency.
  * ============================================================================
  */
  --k2-space-0: 0;
  --k2-space-1: 0.25rem;
  --k2-space-2: 0.5rem;
  --k2-space-3: 0.75rem;
  --k2-space-4: 1rem;
  --k2-space-5: 1.25rem;
  --k2-space-6: 1.5rem;
  --k2-space-7: 1.75rem;
  --k2-space-8: 2rem;
  --k2-space-9: 2.25rem;
  --k2-space-10: 2.5rem;
  --k2-space-11: 3rem;
  --k2-space-12: 3.5rem;
  --k2-space-13: 4rem;
  --k2-space-14: 5rem;



  /**
  * ============================================================================
  * 🟦 K2 Border Radius Tokens
  * ----------------------------------------------------------------------------
  * Defines standard border radius values for consistent rounded corners across
  * UI elements like buttons, cards, modals, inputs, and badges.
  * ============================================================================
  *
  * Usage Guidelines
  * ----------------------------------------------------------------------------
  * 1️⃣ Use sm or md for inputs, small buttons, and minor UI elements.
  * 2️⃣ Use lg or xl for cards, modals, and major containers to create softer surfaces.
  * 3️⃣ Use full radius for avatars, badges, or pill-shaped buttons.
  * 4️⃣ Maintain consistency by applying these predefined variables instead of 
  *    hardcoding pixel values.
  * ============================================================================
  */
  --k2-radius-sm: 0.125rem;   /* Small radius, subtle rounding (2px) */
  --k2-radius-md: 0.375rem;   /* Medium radius (6px), for standard components */
  --k2-radius-lg: 0.5rem;     /* Large radius (8px), for cards and modals */
  --k2-radius-xl: 1rem;       /* Extra large radius (16px), for standout components */
  --k2-radius-full: 9999px;   /* Fully rounded, for circular or pill-shaped elements */


  /**
  * ============================================================================
  * 🟦 K2 Border Width Tokens
  * ----------------------------------------------------------------------------
  * Standardized border widths for outlines, dividers, inputs, and other UI 
  * elements requiring stroke thickness.
  * ============================================================================
  *
  * Usage Guidelines
  * ----------------------------------------------------------------------------
  * 1️⃣ Use sm for subtle dividers or light outlines where minimal emphasis is needed.
  * 2️⃣ Use md for standard input borders, cards, or moderate emphasis UI components.
  * 3️⃣ Use lg for strong visual separation, focus states, or accentuated containers.
  * 4️⃣ Always use these variables instead of hardcoding pixel values to maintain
  *    consistency across the UI.
  * ============================================================================
  */
  */
  --k2-border-width-sm: 1px;   /* Thin border for subtle outlines or dividers */
  --k2-border-width-md: 2px;   /* Medium border for standard UI elements like inputs */
  --k2-border-width-lg: 4px;   /* Thick border for emphasis or focus highlights */


  /**
    * ============================================================================
    * 🕶️ K2 Shadow Tokens
    * ----------------------------------------------------------------------------
    * Predefined shadow levels for depth and elevation in UI components. 
    * Helps create a consistent visual hierarchy for cards, modals, dropdowns,
    * tooltips, and other surfaces requiring depth cues.
    * ============================================================================
    *
    * Usage Guidelines
    * ----------------------------------------------------------------------------
    * 1️⃣ `--k2-shadow-xs` → Extra small shadow for subtle depth on minor elements,
    *                         e.g., form inputs, small cards.
    * 2️⃣ `--k2-shadow-sm` → Small shadow for small components like dropdowns, 
    *                         popovers, or minor elevated panels.
    * 3️⃣ `--k2-shadow-md` → Medium shadow for standard cards, modals, or panels 
    *                         that need moderate elevation.
    * 4️⃣ `--k2-shadow-lg` → Large shadow for prominent surfaces like hero cards, 
    *                         floating dialogs, or major elevated panels.
    *
    * ⚠️ Recommendation: Use these shadow tokens instead of custom values to 
    * maintain consistent visual hierarchy and UI coherence.
    * ============================================================================
  */
  --k2-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);   /* Extra small shadow for subtle depth, e.g., minor cards or inputs */
  --k2-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);    /* Small shadow for small components, dropdowns, popovers */
  --k2-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);    /* Medium shadow for cards, modals, or highlighted panels */
  --k2-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.25); /* Large shadow for prominent surfaces like hero cards, floating dialogs */


  /**
  * ============================================================================
  * ⚡ K2 Transition Tokens
  * ----------------------------------------------------------------------------
  * Standardized durations and easing curves for smooth animations and interactions.
  * Ensures consistency across components like buttons, modals, hover effects, and
  * menu animations.
  * ============================================================================
  *
  * Usage Guidelines
  * ----------------------------------------------------------------------------
  * 1️⃣ Use `--k2-transition-fast` for minor interactions such as button hover,
  *     icon animation, or quick feedback effects.
  * 2️⃣ Use `--k2-transition-default` for modal opening/closing, menu slide,
  *     tab transitions, and other general-purpose animations.
  * 3️⃣ Avoid hardcoding durations or easing directly on elements; always use
  *     these tokens for maintainable and consistent UI motion.
  * ============================================================================
  */
  --k2-transition-fast: 0.2s ease;     /* Quick transition for hover effects, small UI feedback */
  --k2-transition-default: 0.25s ease;  /* Standard transition for general component animations */
  --k2-transition-smooth: 0.3s ease;  /* Standard transition for general component animations */




  /**
  * ============================================================================
  * 🪟 K2 Z-Index Tokens
  * ----------------------------------------------------------------------------
  * Standardized stacking order for UI components to ensure predictable layering.
  * Prevents overlap conflicts between dropdowns, sidebars, modals, toasts, and other
  * overlays.
  * ============================================================================
  *
  * Usage Guidelines
  * ----------------------------------------------------------------------------
  * 1️⃣ Use `--k2-z-base` for standard page elements and content layers.
  * 2️⃣ Use `--k2-z-dropdown` for dropdown menus, select lists, or small popovers
  *     that should appear above regular content.
  * 3️⃣ Use `--k2-z-overlay` for full-screen backdrops or dimmed overlays that
  *     sit behind sidebars and modals.
  * 4️⃣ Use `--k2-z-sidebar` for slide-in sidebars to appear above overlays but
  *     below modals.
  * 5️⃣ Use `--k2-z-modal` for modal dialogs, pop-ups, or any content that
  *     needs to appear above sidebars and overlays.
  * 6️⃣ Use `--k2-z-toast` for transient notifications, alerts, or messages that
  *     must always appear on top of all other UI elements.
  * 7️⃣ Avoid assigning arbitrary z-index values; always use these semantic tokens
  *     to maintain consistent stacking order across the application.
    ┌──────────────────────────────┐  ← 5000 (Toasts)
    │ Toasts / Alerts              │
    ├──────────────────────────────┤  ← 4000 (Modals)
    │ Modals / Dialogs             │
    ├──────────────────────────────┤  ← 3000 (Sidebar)
    │ Sidebar / Offcanvas          │
    ├──────────────────────────────┤  ← 2000 (Overlay)
    │ Overlay / Backdrop           │
    ├──────────────────────────────┤  ← 1000 (Dropdown)
    │ Dropdown / Popover           │
    ├──────────────────────────────┤  ← 900 (Header)
    │ Sticky Header / Nav          │
    ├──────────────────────────────┤  ← 1 (Base)
    │ Main Page Content            │
    └──────────────────────────────┘
      * ============================================================================
  */
  --k2-z-base: 1;         /* Default base layer for normal content */
  --k2-z-header: 900;     /* just below dropdowns, above base */
  --k2-z-dropdown: 1000;  /* Dropdowns, select menus, and popovers */
  --k2-z-overlay: 2000;   /* Full-screen overlays, dimmed backdrops */
  --k2-z-sidebar: 3000;   /* for sidebars */
  --k2-z-modal: 4000;     /* Modals, dialogs, and pop-up windows */
  --k2-z-toast: 5000;     /* Toasts, notifications, or alerts */




  /**
    * ============================================================================
    * 🌫️ K2 Opacity Tokens
    * ----------------------------------------------------------------------------
    * Standardized opacity values for UI elements to ensure consistent transparency
    * usage across the application. Useful for overlays, disabled states, ghost
    * elements, and subtle visual emphasis.
    * ============================================================================
    *
    * Usage Guidelines
    * ----------------------------------------------------------------------------
    * 1️⃣ `--k2-opacity-0`    → Fully transparent. Can be used to hide elements or
    *                          for fade-out transitions.
    * 2️⃣ `--k2-opacity-25`   → Low opacity. Suitable for subtle overlays, ghost
    *                          buttons, or disabled elements.
    * 3️⃣ `--k2-opacity-50`   → Medium opacity. Can be used for modal backdrops,
    *                          partially disabled states, or secondary emphasis.
    * 4️⃣ `--k2-opacity-75`   → High opacity. Use for overlays that need visibility
    *                          without being fully opaque.
    * 5️⃣ `--k2-opacity-100`  → Fully opaque. Default visibility for UI elements.
    *
    * ⚠️ Recommendation: Always use these tokens instead of hardcoding numeric
    * opacity values to maintain consistency across the UI.
    * ============================================================================
  */
  --k2-opacity-0: 0;
  --k2-opacity-25: 0.25;
  --k2-opacity-50: 0.5;
  --k2-opacity-75: 0.75;
  --k2-opacity-100: 1;



/**
  * ============================================================================
  * 🧭 K2 Container Width Tokens
  * ----------------------------------------------------------------------------
  * Standardized maximum widths for responsive containers to ensure consistent
  * layout and alignment across different screen sizes. These tokens correspond
  * to common breakpoint tiers and maintain a coherent grid system across K2.
  * ============================================================================
  *
  * 📘 Usage Guidelines
  * ----------------------------------------------------------------------------
  * 1️⃣ `--k2-container-sm`   → Small containers for mobile / compact views.
  * 2️⃣ `--k2-container-md`   → Medium containers for tablets / small laptops.
  * 3️⃣ `--k2-container-lg`   → Large containers for standard desktops.
  * 4️⃣ `--k2-container-xl`   → Extra-large containers for wide desktops.
  * 5️⃣ `--k2-container-2xl`  → Ultra-wide screens (e.g., large monitors).
  * 6️⃣ `--k2-container-3xl`  → Super-ultra-wide or cinematic layouts (≥1600px+).
  *
  * ⚠️ Recommendation:
  * Use these tokens for container `max-width` instead of hardcoding pixel values.
  * This ensures responsive alignment, scalability, and theming consistency.
  * ============================================================================
  */
  --k2-container-sm: 600px;    /* slightly below 640px breakpoint — compact */
  --k2-container-md: 720px;    /* tablet */
  --k2-container-lg: 960px;    /* small laptop */
  --k2-container-xl: 1140px;   /* desktop */
  --k2-container-2xl: 1320px;  /* ultra-wide desktop */
  --k2-container-3xl: 1600px;  /* super-ultra-wide screens / hero layouts */


  /**
  * ============================================================================
  * 🌈 K2 Gradient Tokens (Final Refactor)
  * ----------------------------------------------------------------------------
  * Three distinct gradient color sets for consistency and maintainability:
  *
  * 1️⃣ Bright / Accent (4 colors) → small elements, CTAs, badges, headings
  * 2️⃣ Soft Light Surface (2 colors) → large sections / light backgrounds
  * 3️⃣ Soft Dark Surface (2 colors) → large sections / dark backgrounds
  *
  * Directions for linear and radial gradients are included as examples.
  * Developers can override direction but must use these variables for colors.
  * ============================================================================
  *
  * Usage Guidance:
  * ----------------------------------------------------------------------------
  * 1️⃣ Soft Light → use for large light-themed sections
  *    Example: background: var(--k2-gradient-light-linear);
  *
  * 2️⃣ Soft Dark → use for large dark-themed sections
  *    Example: background: var(--k2-gradient-dark-linear);
  *
  * 3️⃣ Bright / Accent → small areas, CTA buttons, badges, headings
  *    Example: background: var(--k2-gradient-accent-linear-diagonal);
  *
  * Direction of gradients (linear 90deg, diagonal 45deg, to bottom, radial)
  * can be changed depending on design needs.
  *
  * 🔹 Developers should **always use these variables** instead of hardcoding colors
  *    to ensure consistency across the platform.
  * ============================================================================
  */

  /* ============================================================================
    ⚡ Bright / Accent Gradient Colors (4-color vivid gradient)
    ----------------------------------------------------------------------------
    Usage: CTA buttons, small highlight sections, badges, heading boxes
    ============================================================================
  */
  --k2-color-gradient-accent-1: #ec4d37;  /* vivid red – brand anchor */
  --k2-color-gradient-accent-2: #f78c6c; /*#ef8877;  /* pastel red – soft warmth transition */
  --k2-color-gradient-accent-3: #4fc3f7;  /* golden orange – energy & optimism */
  --k2-color-gradient-accent-4: #81e6b0;  /* cool cyan – tech freshness */


  /* Composite gradients (Bright / Accent) */
  --k2-gradient-accent-linear: linear-gradient(
    90deg,
    var(--k2-color-gradient-accent-1),
    var(--k2-color-gradient-accent-2),
    var(--k2-color-gradient-accent-3),
    var(--k2-color-gradient-accent-4)
  );
  --k2-gradient-accent-linear-diagonal: linear-gradient(
    45deg,
    var(--k2-color-gradient-accent-1),
    var(--k2-color-gradient-accent-2),
    var(--k2-color-gradient-accent-3),
    var(--k2-color-gradient-accent-4)
  );
  --k2-gradient-accent-linear-to-bottom: linear-gradient(
    to bottom,
    var(--k2-color-gradient-accent-1),
    var(--k2-color-gradient-accent-2),
    var(--k2-color-gradient-accent-3),
    var(--k2-color-gradient-accent-4)
  );
  --k2-gradient-accent-radial: radial-gradient(
    circle at center,
    var(--k2-color-gradient-accent-1),
    var(--k2-color-gradient-accent-2),
    var(--k2-color-gradient-accent-3),
    var(--k2-color-gradient-accent-4)
  );

  /* ============================================================================
    🌟 Soft Light Gradient Colors (2-color gradient)
    ----------------------------------------------------------------------------
    Usage: Large sections, light backgrounds (e.g., hero, content section)
    ============================================================================
  */
  --k2-color-gradient-light-1: #faf1ea;  
  --k2-color-gradient-light-2: #eff6f8;  

  /* Composite gradients (Soft Light Surface) */
  --k2-gradient-light-linear: linear-gradient(
    90deg,
    var(--k2-color-gradient-light-1),
    var(--k2-color-gradient-light-2)
  );
  --k2-gradient-light-linear-diagonal: linear-gradient(
    45deg,
    var(--k2-color-gradient-light-1),
    var(--k2-color-gradient-light-2)
  );
  --k2-gradient-light-linear-to-bottom: linear-gradient(
    to bottom,
    var(--k2-color-gradient-light-1),
    var(--k2-color-gradient-light-2)
  );
  --k2-gradient-light-radial: radial-gradient(
    circle at center,
    var(--k2-color-gradient-light-1),
    var(--k2-color-gradient-light-2)
  );

  /* ============================================================================
    🌑 Soft Dark Gradient Colors (2-color gradient)
    ----------------------------------------------------------------------------
    Usage: Large sections, dark backgrounds (e.g., hero, footer, cards)
    ============================================================================
  */
  --k2-color-gradient-muted-1: #fdf0e5;  
  --k2-color-gradient-muted-2: #e6f2f5;  

  /* Composite gradients (Soft Dark Surface) */
  --k2-gradient-muted-linear: linear-gradient(
    90deg,
    var(--k2-color-gradient-muted-1),
    var(--k2-color-gradient-muted-2)
  );
  --k2-gradient-muted-linear-diagonal: linear-gradient(
    45deg,
    var(--k2-color-gradient-muted-1),
    var(--k2-color-gradient-muted-2)
  );
  --k2-gradient-muted-linear-to-bottom: linear-gradient(
    to bottom,
    var(--k2-color-gradient-muted-1),
    var(--k2-color-gradient-muted-2)
  );
  --k2-gradient-muted-radial: radial-gradient(
    circle at center,
    var(--k2-color-gradient-muted-1),
    var(--k2-color-gradient-muted-2)
  );

  /* ============================================================================
    🌑 Soft Dark Gradient Colors (2-color gradient)
    ----------------------------------------------------------------------------
    Usage: Large sections, dark backgrounds (e.g., hero, footer, cards)
    ============================================================================
  */
  --k2-color-gradient-dark-1: #0f2530;  /* dark base - deep blue-teal base */
  --k2-color-gradient-dark-2: #193743d5;  /* secondary dark - slightly lighter teal-gray for depth */

  /* Composite gradients (Soft Dark Surface) */
  --k2-gradient-dark-linear: linear-gradient(
    90deg,
    var(--k2-color-gradient-dark-1),
    var(--k2-color-gradient-dark-2)
  );
  --k2-gradient-dark-linear-diagonal: linear-gradient(
    45deg,
    var(--k2-color-gradient-dark-1),
    var(--k2-color-gradient-dark-2)
  );
  --k2-gradient-dark-linear-to-bottom: linear-gradient(
    to bottom,
    var(--k2-color-gradient-dark-1),
    var(--k2-color-gradient-dark-2)
  );
  --k2-gradient-dark-radial: radial-gradient(
    circle at center,
    var(--k2-color-gradient-dark-1),
    var(--k2-color-gradient-dark-2)
  );

}