/* =============================================================
   KPCL CENTRAL THEME - public/css/theme.css
   All CSS custom properties (design tokens) for the KPCL website.
   These defaults are OVERRIDDEN dynamically by the admin-managed
   :root block injected via layouts/app.blade.php.
   ============================================================= */

:root {
    /* ── Brand Colors ── */
    --color-primary:        #e6007e;   /* Main brand pink/magenta */
    --color-primary-dark:   #c20093;   /* Darker hover pink */
    --color-primary-light:  #fdf2f8;   /* Light pink background tint */
    --color-primary-accent: #ffb3d1;   /* Soft pink for text highlights */

    --color-secondary:      #00153f;   /* Deep navy / dark headings */
    --color-secondary-dark: #07091f;   /* Near-black navy */
    --color-secondary-light:#e8eaf5;   /* Pale navy tint for bg */

    /* ── Text Colors ── */
    --color-text-main:      #1e293b;   /* Main body text */
    --color-text-muted:     #64748b;   /* Secondary / muted text */
    --color-text-light:     #94a3b8;   /* Placeholder / hint text */
    --color-text-white:     #ffffff;   /* White text on dark bgs */

    /* ── Backgrounds ── */
    --color-bg-page:        #ffffff;   /* Main page background */
    --color-bg-subtle:      #f8f9fa;   /* Subtle light grey sections */
    --color-bg-alt:         #fafbfc;   /* Alternate section background */
    --color-bg-dark:        #00153f;   /* Dark banner / footer bg */

    /* ── Status & UI Colors ── */
    --color-success:        #28a745;   /* Success green */
    --color-warning:        #f59e0b;   /* Warning amber */
    --color-danger:         #ef4444;   /* Danger / error red */
    --color-info:           #3b82f6;   /* Info blue */

    /* ── Contact Page ── */
    --contact-primary:      #3b82f6;
    --contact-secondary:    #8b5cf6;
    --glass-bg:             rgba(255,255,255,0.85);
    --glass-border:         rgba(255,255,255,0.4);

    /* ── Legacy aliases (used in older partials) ── */
    --hp-pink:              var(--color-primary);
    --hp-navy:              var(--color-secondary);
    --hp-pink-light:        var(--color-primary-light);
    --pk:                   var(--color-primary);
    --dk:                   var(--color-secondary);
}

/* ── Utility classes that consume the variables ── */

.text-brand          { color: var(--color-primary) !important; }
.text-brand-dark     { color: var(--color-secondary) !important; }
.bg-brand            { background-color: var(--color-primary) !important; }
.bg-brand-dark       { background-color: var(--color-secondary) !important; }
.bg-brand-light      { background-color: var(--color-primary-light) !important; }
.bg-subtle           { background-color: var(--color-bg-subtle) !important; }
.border-brand        { border-color: var(--color-primary) !important; }

.btn-brand {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    transition: background-color .2s ease;
}
.btn-brand:hover {
    background-color: var(--color-primary-dark);
    color: #fff;
}

.btn-brand-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    transition: all .2s ease;
}
.btn-brand-outline:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* Section title underline accent */
.section-accent-line {
    width: 50px;
    height: 3px;
    background-color: var(--color-primary);
    display: inline-block;
    border-radius: 2px;
}

/* Gradient hero background */
.hero-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}