/*
===============================================================================
PRIMERISE DEVELOPMENT LLC - UNIFIED DESIGN SYSTEM
===============================================================================

Framework: DaisyUI-Extended Design System
Built on: DaisyUI v4.12.10 + Tailwind CSS
Theme: "business" with PrimeRise brand customizations
Version: 2.0 - Post Phase 2 Tailwind Convergence

METHODOLOGY:
This file implements a "DaisyUI-Extended" methodology where:
1. DaisyUI provides the robust component foundation
2. Custom utilities extend DaisyUI components with brand identity
3. CSS custom properties enable theme-aware brand colors
4. Legacy utilities provide backwards compatibility during transition

USAGE PATTERNS:
- New Pattern: <button class="btn btn-prime-primary">
- Legacy Pattern: <button class="btn-prime-primary"> (still supported)
- DaisyUI Integration: Extensions use CSS custom properties for theming

===============================================================================
TABLE OF CONTENTS
===============================================================================

1. PrimeRise Brand Theme & Design Tokens
   - CSS Custom Properties (:root)
   - Base Body Styling

2. DaisyUI Component Extensions
   - Enhanced Button System (.btn.btn-prime-*)
   - Enhanced Card System (.card.card-prime-*)
   - Enhanced Alert System (.alert.alert-prime-*)

3. Custom Standalone Utilities
   - Layout & Container System (.container-*)
   - Responsive Grid System (.grid-responsive-*)
   - Brand Typography System (.section-title-*, .page-title)
   - Brand Icon & Avatar System (.icon-*, .avatar-*)
   - Brand Color Utilities (.bg-brand-*, .text-brand-*)
   - Utility Elements (.bullet-point, .flex-*)

4. Legacy & Backwards Compatibility
   - Legacy Button Utilities
   - Legacy Card Utilities  
   - Legacy DaisyUI Extensions
   - Page-Specific Styles

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

/* ===== SECTION 1: PRIMERISE BRAND THEME & DESIGN TOKENS ===== */

/* Base Body Styling - Enhanced readability */
body {
    margin-left: 15px;
    margin-right: 15px;
    font-size: 1.125rem; /* 18px - improved readability for construction industry audience */
}

/* CSS Custom Properties - Brand Theme Integration */
:root {
    /* Primary Brand Colors - Amber palette for construction/development industry */
    --prime-brand-amber: #fbbf24;        /* amber-400 - Primary brand color */
    --prime-brand-amber-hover: #f59e0b;  /* amber-500 - Hover state for brand elements */
    
    /* Secondary Brand Colors - Professional slate palette */
    --prime-brand-slate: #0f172a;        /* slate-900 - Primary text and strong backgrounds */
    --prime-brand-slate-800: #1e293b;    /* slate-800 - Secondary backgrounds and gradients */
    
    /* Brand Gradients - For premium visual elements */
    --prime-brand-gradient: linear-gradient(135deg, var(--prime-brand-amber) 0%, var(--prime-brand-amber-hover) 100%);
}

/* ===== SECTION 2: DAISYUI COMPONENT EXTENSIONS ===== */

/* Enhanced DaisyUI Button System */
/* Extends DaisyUI .btn component with PrimeRise brand styling */

/* Primary Brand Button Extension */
/* New Pattern: <button class="btn btn-prime-primary">Primary Action</button> */
.btn.btn-prime-primary {
    @apply bg-amber-400 text-slate-900 border-amber-400 hover:bg-amber-500 hover:border-amber-500 hover:scale-105;
    background-color: var(--prime-brand-amber);
    border-color: var(--prime-brand-amber);
    color: var(--prime-brand-slate);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn.btn-prime-primary:hover {
    background-color: var(--prime-brand-amber-hover);
    border-color: var(--prime-brand-amber-hover);
    transform: scale(1.05);
}

/* Secondary Brand Button Extension */
/* New Pattern: <button class="btn btn-prime-secondary">Secondary Action</button> */
.btn.btn-prime-secondary {
    @apply border-2 border-white text-white bg-transparent hover:bg-white hover:text-slate-900 hover:scale-105;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Hero Section Button Extension */
/* New Pattern: <button class="btn btn-hero">Get Started</button> */
.btn.btn-hero {
    @apply btn-primary btn-lg px-12 py-5 text-xl font-bold shadow-xl hover:scale-105;
    transition: all 0.3s ease;
    background-color: var(--prime-brand-amber);
    border-color: var(--prime-brand-amber);
    color: var(--prime-brand-slate);
}

.btn.btn-hero:hover {
    background-color: var(--prime-brand-amber-hover);
    border-color: var(--prime-brand-amber-hover);
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Secondary Hero Button Extension */
/* New Pattern: <button class="btn btn-secondary">Secondary Action</button> */
.btn-secondary {
    @apply border-2 border-white text-white bg-transparent px-12 py-5 text-xl font-bold shadow-xl hover:bg-white hover:text-slate-900 hover:scale-105 inline-block;
    transition: all 0.3s ease;
    border-radius: 0.75rem;
}

.btn-secondary:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Call-to-Action Button Extension */
/* New Pattern: <button class="btn btn-cta">Contact Us Today</button> */
.btn.btn-cta {
    @apply btn-primary btn-lg px-12 py-5 text-xl font-bold shadow-lg hover:scale-105;
    transition: all 0.3s ease;
}

/* Form Submit Button Extension */
/* New Pattern: <button class="btn btn-form">Submit Form</button> */
.btn.btn-form {
    @apply btn-primary w-full py-4 px-8 text-lg font-bold shadow-lg hover:scale-105;
    transition: all 0.3s ease;
}

/* Enhanced DaisyUI Card System */
/* Extends DaisyUI .card component with PrimeRise brand styling */

/* Standard Brand Card Extension */
/* New Pattern: <div class="card card-prime">Content</div> */
.card.card-prime {
    @apply bg-base-100 shadow-xl rounded-2xl;
    transition: all 0.3s ease;
}

/* Interactive Brand Card Extension with Hover Effects */
/* New Pattern: <div class="card card-prime-hover">Interactive Content</div> */
.card.card-prime-hover {
    @apply bg-base-100 shadow-xl rounded-2xl;
    transition: all 0.3s ease;
}

.card.card-prime-hover:hover {
    @apply shadow-2xl;
    transform: translateY(-4px);
}

/* Admin Panel Card Extension */
/* New Pattern: <div class="card card-admin">Admin Content</div> */
.card.card-admin {
    @apply bg-base-100 shadow-lg rounded-lg p-6;
}

/* Enhanced DaisyUI Alert System */
/* Extends DaisyUI .alert component with PrimeRise brand styling */

/* Success Alert Extension */
/* New Pattern: <div class="alert alert-prime-success">Success message</div> */
.alert.alert-prime-success {
    @apply alert-success;
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgb(34, 197, 94);
}

/* Error Alert Extension */
/* New Pattern: <div class="alert alert-prime-error">Error message</div> */
.alert.alert-prime-error {
    @apply alert-error;
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgb(239, 68, 68);
}

/* ===== SECTION 3: CUSTOM STANDALONE UTILITIES ===== */

/* Layout & Container System */
/* Standardized container patterns with responsive behavior */

/* Main Container - Standard max-width with responsive padding */
/* Usage: <div class="container-main">Standard content container</div> */
.container-main {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Centered Container - Container with center-aligned text */
/* Usage: <div class="container-centered">Centered content</div> */
.container-centered {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center;
}

/* Padded Container - Container with vertical padding for sections */
/* Usage: <div class="container-with-padding">Section content</div> */
.container-with-padding {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
}

/* Responsive Grid System */
/* Standard grid patterns for consistent layouts */

/* 3-Column Responsive Grid - Desktop 3 cols, Mobile 1 col */
/* Usage: <div class="grid-responsive-3">Three column content</div> */
.grid-responsive-3 {
    @apply grid grid-cols-1 md:grid-cols-3 gap-10;
}

/* 2-Column Responsive Grid - Desktop 2 cols, Mobile 1 col */
/* Usage: <div class="grid-responsive-2">Two column content</div> */
.grid-responsive-2 {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
}

/* Brand Typography System */
/* Typography utilities that integrate with DaisyUI theme colors */

/* Standard Page Title - Uses DaisyUI theme-aware colors */
/* Usage: <h1 class="page-title">Page Title</h1> */
.page-title {
    @apply text-3xl font-bold;
    color: hsl(var(--bc)); /* Uses DaisyUI base-content for theme compatibility */
}

/* Standard Section Title - Uses DaisyUI theme-aware colors */
/* Usage: <h2 class="section-title">Section Title</h2> */
.section-title {
    @apply text-lg font-semibold;
    color: hsl(var(--bc)); /* Uses DaisyUI base-content for theme compatibility */
}

/* Large Section Title - Brand-specific styling for hero sections */
/* Usage: <h2 class="section-title-lg">Our Services</h2> */
.section-title-lg {
    @apply text-4xl md:text-5xl font-bold mb-6 tracking-tight;
    color: var(--prime-brand-slate);
}

/* Extra Large Section Title - For major page headings */
/* Usage: <h1 class="section-title-xl">Welcome to PrimeRise</h1> */
.section-title-xl {
    @apply text-3xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight;
    color: var(--prime-brand-slate);
}

/* Brand Icon & Avatar System */
/* Branded icon containers and avatar elements */

/* Generic Icon Container - Neutral background */
/* Usage: <div class="icon-container"><svg>...</svg></div> */
.icon-container {
    @apply w-12 h-12 rounded-lg flex items-center justify-center;
}

/* Blue Icon Container - For informational icons */
/* Usage: <div class="icon-container-blue"><svg>...</svg></div> */
.icon-container-blue {
    @apply w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center;
}

/* Green Icon Container - For success/positive icons */
/* Usage: <div class="icon-container-green"><svg>...</svg></div> */
.icon-container-green {
    @apply w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center;
}

/* Amber Icon Container - For warning/attention icons */
/* Usage: <div class="icon-container-amber"><svg>...</svg></div> */
.icon-container-amber {
    @apply w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center;
}

/* Large Brand Icon - Primary brand gradient background for hero sections */
/* Usage: <div class="icon-amber-large"><svg>...</svg></div> */
.icon-amber-large {
    @apply w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg;
    background: var(--prime-brand-gradient);
}

/* Medium Brand Icon - For cards and smaller sections */
/* Usage: <div class="icon-amber-medium"><svg>...</svg></div> */
.icon-amber-medium {
    @apply w-12 h-12 rounded-full flex items-center justify-center;
    background: var(--prime-brand-gradient);
}

/* Gradient Avatar - For user profiles and testimonials */
/* Usage: <div class="avatar-gradient">JD</div> */
.avatar-gradient {
    @apply w-10 h-10 rounded-full flex items-center justify-center;
    background: var(--prime-brand-gradient);
}

/* Brand Color Utilities */
/* Semantic color utilities using CSS custom properties for theme flexibility */

/* Primary Brand Background - Amber brand color */
/* Usage: <div class="bg-brand-primary">Highlighted content</div> */
.bg-brand-primary {
    background-color: var(--prime-brand-amber);
}

/* Secondary Brand Background - Slate professional color */
/* Usage: <div class="bg-brand-secondary">Dark content</div> */
.bg-brand-secondary {
    background-color: var(--prime-brand-slate);
}

/* Brand Gradient Background - Premium visual treatment */
/* Usage: <div class="bg-brand-gradient">Premium content</div> */
.bg-brand-gradient {
    background: var(--prime-brand-gradient);
}

/* Primary Brand Text - Amber brand color for text */
/* Usage: <p class="text-brand-primary">Highlighted text</p> */
.text-brand-primary {
    color: var(--prime-brand-amber);
}

/* Secondary Brand Text - Slate color for strong text */
/* Usage: <p class="text-brand-secondary">Professional text</p> */
.text-brand-secondary {
    color: var(--prime-brand-slate);
}

/* Utility Elements */
/* Small utility components for consistent styling */

/* Brand Bullet Point - Amber circular indicator */
/* Usage: <div class="bullet-point"></div> */
.bullet-point {
    @apply w-2 h-2 rounded-full;
    background-color: var(--prime-brand-amber);
}

/* Flex Center - Center content both horizontally and vertically */
/* Usage: <div class="flex-center">Centered content</div> */
.flex-center {
    @apply flex items-center justify-center;
}

/* Flex Center Column - Center content in vertical layout */
/* Usage: <div class="flex-center-col">Vertically centered content</div> */
.flex-center-col {
    @apply flex flex-col items-center justify-center;
}

/* Admin Panel Specific Utilities */
/* Specialized utilities for admin interface components */

/* Admin Card Header - Branded header for admin cards */
/* Usage: <div class="card-admin-header">Admin Section Title</div> */
.card-admin-header {
    background-color: var(--prime-brand-slate);
    @apply text-white px-6 py-4 -mx-6 -mt-6 mb-6;
}

/* ===== SECTION 4: LEGACY & BACKWARDS COMPATIBILITY ===== */
/* 
Maintains support for existing implementations during transition period.
These utilities are deprecated in favor of DaisyUI-integrated equivalents.
Consider migrating to new patterns for better maintainability.
*/

/* Legacy Button Utilities */
/* DEPRECATED: Use .btn.btn-prime-primary instead */
.btn-prime-primary {
    @apply bg-amber-400 text-slate-900 px-6 py-3 rounded-xl font-bold hover:bg-amber-500 hover:scale-105 transition-all duration-300 shadow-lg inline-block;
}

/* DEPRECATED: Use .btn.btn-prime-secondary instead */
.btn-prime-secondary {
    @apply border-2 border-white text-white px-6 py-3 rounded-xl font-bold hover:bg-white hover:text-slate-900 hover:scale-105 transition-all duration-300 shadow-lg inline-block;
}

/* Legacy DaisyUI Button Extensions - Maintained for existing code */
.btn-primary {
    @apply btn btn-primary;
}

.btn-primary-small {
    @apply btn btn-primary btn-sm;
}

.btn-pagination {
    @apply btn btn-sm btn-ghost;
}

.btn-pagination-active {
    @apply btn btn-sm btn-primary;
}

/* Legacy Card Utilities */
/* DEPRECATED: Use .card.card-prime instead */
.card {
    @apply card bg-base-100 shadow-xl;
}

.card-large {
    @apply card bg-base-100 shadow-2xl;
}

.card-overflow {
    @apply card bg-base-100 shadow-xl;
}

.card-gallery {
    @apply card bg-base-100 shadow-2xl;
}

/* Legacy standalone card utilities - maintained for transition period */
.card-container {
    @apply bg-white rounded-2xl shadow-lg transition-shadow duration-300;
}

.card-container-hover {
    @apply bg-white rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-1 transform transition-shadow duration-300;
}

/* Legacy Alert Utilities */
/* DEPRECATED: Use .alert.alert-prime-success instead */
.alert-error {
    @apply alert alert-error;
}

.alert-success {
    @apply alert alert-success;
}

/*
===============================================================================
END OF PRIMERISE UNIFIED DESIGN SYSTEM
===============================================================================

For questions about this design system or to propose new utilities:
1. Check existing patterns before creating custom styles
2. Follow the DaisyUI-Extended methodology
3. Use CSS custom properties for themeable values
4. Document new utilities with usage examples

Last Updated: Phase 2 Tailwind Convergence Completion
Maintainer: PrimeRise Development Team
===============================================================================
*/