/* 
 K2 UI – Common v1.0.0

k2-common.css -  
A foundational stylesheet that uses k2-theme.css tokens for base typography, 
layout structure, containers, buttons, forms, and utility helpers. It assumes you’ve already 
loaded k2-reset.css and k2-theme.css.

All classes here are mobile-first.

Note: Responsive classes (for dektop and larger devices) are in k2-breakpoints.css

*/



/**
  * ============================================================================
  * 🖋️ K2 Typography Defaults
  * ----------------------------------------------------------------------------
  * Standardized font family, font sizes, line heights, and heading styles for
  * consistent typography across the application. Uses K2 design tokens for
  * font sizes, spacing, and colors.
  * ============================================================================
  *
  * Elements & Usage Guidelines
  * ----------------------------------------------------------------------------
  * 1️⃣ `body`
  *    - Font family: `--k2-font-sans`
  *    - Font size: `--k2-font-md`
  *    - Background: `--k2-bg-primary`
  *    - Text color: `--k2-bg-primary-text`
  *    - Line height: 1.5
  *    - Usage: Default typography for page content.
  *
  * 2️⃣ Headings `h1` to `h6`
  *    - Inherit color from parent context.
  *    - Font weight: 600 (semi-bold)
  *    - Bottom margin: `--k2-space-2`
  *    - Font sizes:
  *       • h1 → `--k2-font-4xl`
  *       • h2 → `--k2-font-3xl`
  *       • h3 → `--k2-font-2xl`
  *       • h4 → `--k2-font-xl`
  *       • h5 → `--k2-font-lg`
  *       • h6 → `--k2-font-md`
  *    - Usage: Use headings for semantic sectioning and hierarchy.
  *
  * 3️⃣ Paragraphs `p`
  *    - Bottom margin: `--k2-space-3`
  *    - Usage: Standard spacing between blocks of text.
  *
  * ⚠️ Recommendations:
  *    - Do not hardcode font sizes; use K2 font scale variables.
  *    - Maintain semantic structure with headings (h1–h6) for accessibility.
  *    - Adjust color inheritance for specific sections via background/text tokens.
  * ============================================================================
 */
body {
  font-family: var(--k2-font-sans);
  font-size: var(--k2-font-base);
  background-color: var(--k2-bg-primary);
  color: var(--k2-bg-primary-text);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  color: inherit; /* inherit from parent context */
  font-weight: 600;
  line-height: 1.2; /* tighter for mobile */
  margin-top: var(--k2-space-4);
  margin-bottom: var(--k2-space-2);
}

h1 { font-size: var(--k2-font-3xl); }
h2 { font-size: var(--k2-font-2xl); }
h3 { font-size: var(--k2-font-xl); }
h4 { font-size: var(--k2-font-lg); }
h5 { font-size: var(--k2-font-md); }
h6 { font-size: var(--k2-font-sm); }

/* Desktop — more open, bold presence */
@media (min-width: 768px) {
  h1 { font-size: var(--k2-font-5xl); }
  h2 { font-size: var(--k2-font-4xl); }
  h3 { font-size: var(--k2-font-3xl); }
  h4 { font-size: var(--k2-font-2xl); }
  h5 { font-size: var(--k2-font-xl); }
  h6 { font-size: var(--k2-font-lg); }

  /* Larger screens — give more breathing space */
  h1, h2, h3 {
    line-height: 1.25;
    margin-top: var(--k2-space-6);
    margin-bottom: var(--k2-space-3);
  }
}

p {
  font-size: var(--k2-font-base);
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: var(--k2-space-4);
  color: inherit; /* inherit from context */
}

/* Last paragraph in a block – remove extra bottom space */
p:last-child {
  margin-bottom: 0;
}

/* Larger screens – more open rhythm */
@media (min-width: 768px) {
  p {
    font-size: var(--k2-font-lg); /* slightly larger text on desktop */
    line-height: 1.75; /* more relaxed for longer reading */
    margin-bottom: var(--k2-space-5);
  }
}


/**
 * ============================================================================
 * 🔗 Link / Anchor Styles
 * ----------------------------------------------------------------------------
 * Provides base styling for anchor (<a>) elements:
 *  - No underline by default
 *  - Smooth transition for hover color and text-decoration
 *
 * Utility Classes:
 *  - .k2-underline    → forces underline
 *  - .k2-no-underline → removes underline
 *
 * Usage Guidance:
 * ----------------------------------------------------------------------------
 * 1️⃣ Base <a> elements inherit color from parent; use `.k2-text-*` for semantic colors.
 * 2️⃣ Hover automatically applies underline unless `.k2-no-underline` is used.
 * 3️⃣ Use `.k2-underline` for emphasized links that must always show underline.
 * 4️⃣ Works with other utilities like `.k2-text-gradient-*` or `.k2-bg-*`.
 * ============================================================================
 */
a {
  text-decoration: none;
  transition: color var(--k2-transition-default), text-decoration var(--k2-transition-default);
}
a:hover {
  text-decoration: none;
}
/* Utility classes for controlling underline */
.k2-underline    { text-decoration: underline !important; }
.k2-no-underline { text-decoration: none !important; }



/**
  * ============================================================================
  * 🎨 K2 Background & Foreground Utility Classes
  * ----------------------------------------------------------------------------
  * Predefined utility classes to apply background colors along with their
  * matching readable text colors. These classes use the semantic K2 color
  * variables to ensure consistent color usage across the application.
  * ============================================================================
  *
  * Classes & Usage Guidelines
  * ----------------------------------------------------------------------------
  * 1️⃣ `.k2-bg-primary` 
  *    - Applies `--k2-bg-primary` as background and `--k2-bg-primary-text` for text.
  *    - Usage: Default page/container surfaces, main sections, primary CTA buttons
  *
  * 2️⃣ `.k2-bg-secondary` 
  *    - Applies `--k2-bg-secondary` background and `--k2-bg-secondary-text` text.
  *    - Usage: Panels, secondary sections, subtle highlights, secondary CTA buttons
  *
  * 3️⃣ `.k2-bg-muted` 
  *    - Applies `--k2-bg-muted` background and `--k2-bg-muted-text` text.
  *    - Usage: Neutral or low-emphasis sections, minor panels, dividers.
  *
  * 4️⃣ `.k2-bg-muted-strong` 
  *    - Applies `--k2-bg-muted-strong` background and `--k2-bg-muted-strong-text` text.
  *    - Usage: Cards, sidebars, panels that need stronger contrast.
  *
  * 5️⃣ `.k2-bg-light` 
  *    - Applies `--k2-bg-light` background and `--k2-bg-light-text` text.
  *    - Usage: body, Cards, modals, popups, small lightweight surfaces.
  *
  * 6️⃣ `.k2-bg-dark` 
  *    - Applies `--k2-bg-dark` background and `--k2-bg-dark-text` text.
  *    - Usage: body, Dark sections, hero overlays, footers, or dark mode surfaces.
  *
  * 7️⃣ `.k2-bg-accent` 
  *    - Applies `--k2-bg-accent` background and `--k2-bg-accent-text` text.
  *    - Usage: Highlighted sections, areas, buttons, badges, links, or small CTA elements.
  *
  * ⚠️ Recommendation:
  *    - Always use these utility classes instead of hardcoding colors.
  *    - Maintains visual consistency and accessibility across the UI.

  When to use BEM Convention (Block--modifier) 
  | Type               | Example                              | Use                                 |
| ------------------ | ------------------------------------ | ----------------------------------- |
| **Size variant**   | `.k2-btn-sm`, `.k2-btn-xl`           | Keep current naming (utility style) |
| **Visual variant** | `.k2-btn--outline`, `.k2-btn--solid` | Use double-dash (modifier style)    |

  * ============================================================================
 */
.k2-bg-primary {
  background-color: var(--k2-bg-primary) !important;
  color: var(--k2-bg-primary-text) !important;
}
.k2-bg-secondary {
  background-color: var(--k2-bg-secondary) !important;
  color: var(--k2-bg-secondary-text) !important;
}
.k2-bg-muted {
  background-color: var(--k2-bg-muted) !important;
  color: var(--k2-bg-muted-text) !important;
}
.k2-bg-muted-strong {
  background-color: var(--k2-bg-muted-strong) !important;
  color: var(--k2-bg-muted-strong-text) !important;
}
.k2-bg-light {
  background-color: var(--k2-bg-light) !important;
  color: var(--k2-bg-light-text) !important;
}
.k2-bg-dark {
  background-color: var(--k2-bg-dark) !important;
  color: var(--k2-bg-dark-text) !important;
}
.k2-bg-accent {
  background-color: var(--k2-bg-accent) !important;
  color: var(--k2-bg-accent-text) !important;
}

.k2-bg-success {
  background-color: var(--k2-bg-success) !important;
  color: var(--k2-bg-success-text) !important;
}
.k2-bg-warning {
  background-color: var(--k2-bg-warning) !important;
  color: var(--k2-bg-warning-text) !important;
}
.k2-bg-danger {
  background-color: var(--k2-bg-danger) !important;
  color: var(--k2-bg-danger-text) !important;
}
.k2-bg-info {
  background-color: var(--k2-bg-info) !important;
  color: var(--k2-bg-info-text) !important;
}




/* ===========================================================
   🎨 PASTEL BACKGROUND UTILITIES
   -----------------------------------------------------------
   Use these classes to apply soft, vibrant background colors 
   for cards, sections, or surfaces. Each color automatically 
   pairs with its accessible “on-color” text.
   Example:
       <div class="k2-bg-teal">...</div>
   -----------------------------------------------------------
=========================================================== */

.k2-bg-green {
  background-color: var(--k2-color-green) !important;
  color: var(--k2-color-on-green) !important;
}

.k2-bg-teal {
  background-color: var(--k2-color-teal) !important;
  color: var(--k2-color-on-teal) !important;
}

.k2-bg-blue {
  background-color: var(--k2-color-blue) !important;
  color: var(--k2-color-on-blue) !important;
}

.k2-bg-indigo {
  background-color: var(--k2-color-indigo) !important;
  color: var(--k2-color-on-indigo) !important;
}

.k2-bg-purple {
  background-color: var(--k2-color-purple) !important;
  color: var(--k2-color-on-purple) !important;
}

.k2-bg-pink {
  background-color: var(--k2-color-pink) !important;
  color: var(--k2-color-on-pink) !important;
}

.k2-bg-red {
  background-color: var(--k2-color-red) !important;
  color: var(--k2-color-on-red) !important;
}

.k2-bg-orange {
  background-color: var(--k2-color-orange) !important;
  color: var(--k2-color-on-orange) !important;
}

.k2-bg-yellow {
  background-color: var(--k2-color-yellow) !important;
  color: var(--k2-color-on-yellow) !important;
}

.k2-bg-gray {
  background-color: var(--k2-color-gray) !important;
  color: var(--k2-color-on-gray) !important;
}

.k2-bg-sand {
  background-color: var(--k2-color-sand) !important;
  color: var(--k2-color-on-sand) !important;
}


/**
 * ============================================================================
 * 🎨 K2 Text Color Utility Classes
 * ----------------------------------------------------------------------------
 * Provides theme-driven text color utilities mapped to the core design tokens
 * defined in `k2-theme.css`. These utilities ensure consistent color usage
 * across headings, paragraphs, buttons, and UI components.
 *
 * Naming Convention:
 *   .k2-text-[tone]
 *     [tone] → primary | secondary | light | dark | muted | muted-strong |
 *               accent | success | warning | danger | info
 *
 * Examples:
 *   - .k2-text-primary        → Brand or primary action color
 *   - .k2-text-muted          → Low-emphasis secondary text
 *   - .k2-text-success        → Positive state or confirmation message
 *   - .k2-text-danger         → Error or destructive state
 *
 * Usage Guidance:
 * ----------------------------------------------------------------------------
 * 1️⃣ Use semantic tones (`success`, `warning`, `danger`, `info`) for stateful UI text.
 * 2️⃣ Use `.k2-text-primary` and `.k2-text-secondary` for brand and supporting text.
 * 3️⃣ `.k2-text-muted` and `.k2-text-muted-strong` are ideal for captions or sublabels.
 * 4️⃣ Works well in combination with typography utilities (e.g. `.k2-fw-semibold`).
 * 5️⃣ All color values reference CSS variables → fully themeable via `k2-theme.css`.
 * ============================================================================
 */
.k2-text-primary { color: var(--k2-color-primary) !important; }
.k2-text-secondary { color: var(--k2-color-secondary) !important; }
.k2-text-light   { color: var(--k2-color-light) !important; }
.k2-text-dark    { color: var(--k2-color-dark) !important; }
.k2-text-muted   { color: var(--k2-color-muted) !important; }
.k2-text-muted-strong   { color: var(--k2-color-muted-strong) !important; }
.k2-text-accent  { color: var(--k2-color-accent) !important; }
.k2-text-success { color: var(--k2-color-success) !important; }
.k2-text-warning { color: var(--k2-color-warning) !important; }
.k2-text-danger  { color: var(--k2-color-danger) !important; }
.k2-text-info    { color: var(--k2-color-info) !important; }

.k2-text-green    { color: var(--k2-color-green) !important; }
.k2-text-teal    { color: var(--k2-color-teal) !important; }
.k2-text-blue    { color: var(--k2-color-blue) !important; }
.k2-text-indigo    { color: var(--k2-color-indigo) !important; }
.k2-text-purple    { color: var(--k2-color-purple) !important; }
.k2-text-pink    { color: var(--k2-color-pink) !important; }
.k2-text-red    { color: var(--k2-color-red) !important; }
.k2-text-orange    { color: var(--k2-color-orange) !important; }
.k2-text-yellow    { color: var(--k2-color-yellow) !important; }
.k2-text-gray    { color: var(--k2-color-gray) !important; }
.k2-text-sand    { color: var(--k2-color-sand) !important; }



/**
 * ============================================================================
 * 🔤 K2 Font Size Utility Classes
 * ----------------------------------------------------------------------------
 * Provides scalable, token-based typography control using semantic size levels.
 * Each class maps directly to a corresponding `--k2-font-*` variable to ensure
 * consistency across the entire K2 UI framework.
 *
 * Naming Convention:
 *   .k2-text-[size]
 *     [size] → xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl | 7xl | 8xl
 *
 * Examples:
 *   - .k2-text-sm  → Small body text
 *   - .k2-text-lg  → Large paragraph or subheading
 *   - .k2-text-3xl → Hero or display text
 *
 * Usage Guidance:
 * ----------------------------------------------------------------------------
 * 1️⃣ Use these utilities to maintain type scale consistency across sections.
 * 2️⃣ Sizes are responsive-friendly; can be overridden in `k2-breakpoints.css`.
 * 3️⃣ Pair with `.k2-font-*` utilities (weight, family, line-height) for complete control.
 * 4️⃣ Avoid hardcoded `font-size` in components — always rely on these tokens.
 * ============================================================================
 */
.k2-text-xs   { font-size: var(--k2-font-xs) !important; }
.k2-text-sm   { font-size: var(--k2-font-sm) !important; }
.k2-text-md   { font-size: var(--k2-font-md) !important; }
.k2-text-lg   { font-size: var(--k2-font-lg) !important; }
.k2-text-xl   { font-size: var(--k2-font-xl) !important; }
.k2-text-2xl  { font-size: var(--k2-font-2xl) !important; }
.k2-text-3xl  { font-size: var(--k2-font-3xl) !important; }
.k2-text-4xl  { font-size: var(--k2-font-4xl) !important; }
.k2-text-5xl  { font-size: var(--k2-font-5xl) !important; }
.k2-text-6xl  { font-size: var(--k2-font-6xl) !important; }
.k2-text-7xl  { font-size: var(--k2-font-7xl) !important; }
.k2-text-8xl  { font-size: var(--k2-font-8xl) !important; }



/**
 * ============================================================================
 * 💪 K2 Font Weight Utility Classes
 * ----------------------------------------------------------------------------
 * Provides consistent font-weight control using numeric weight levels (100–900).
 * These utilities help establish clear typographic hierarchy without custom CSS.
 *
 * Naming Convention:
 *   .k2-text-[weight]
 *     [weight] → thin | extralight | light | normal | medium | semibold | bold | extrabold | heavy
 *
 * Examples:
 *   - .k2-text-light     → Light-weight body text (300)
 *   - .k2-text-semibold  → Section heading or label (600)
 *   - .k2-text-heavy     → Display or strong emphasis (900)
 *
 * Usage Guidance:
 * ----------------------------------------------------------------------------
 * 1️⃣ Use `.k2-text-normal` for standard paragraphs and `.k2-text-medium` for UI text.
 * 2️⃣ Avoid using too many weights on one page — stick to 2–3 for performance and clarity.
 * 3️⃣ `.k2-text-heavy` replaces `.k2-text-black` to avoid confusion with color utilities.
 * 4️⃣ Can be combined with `.k2-text-[size]` for consistent typographic control.
 * ============================================================================
 */
.k2-text-thin       { font-weight: 100 !important; }
.k2-text-extralight { font-weight: 200 !important; }
.k2-text-light      { font-weight: 300 !important; }
.k2-text-normal     { font-weight: 400 !important; }
.k2-text-medium     { font-weight: 500 !important; }
.k2-text-semibold   { font-weight: 600 !important; }
.k2-text-bold       { font-weight: 700 !important; }
.k2-text-extrabold  { font-weight: 800 !important; }
.k2-text-heavy      { font-weight: 900 !important; }