/*
 * Content Goblin Design System
 * Phase 1: Foundation — CSS Custom Properties
 *
 * This file defines the design tokens for the entire application.
 * All custom styling should reference these variables rather than
 * hardcoded values, ensuring consistency and theme-adaptability.
 */

/* ==========================================================================
   1. SPACING SCALE
   ========================================================================== */
:root {
    --space-xs:   0.25rem;   /*  4px */
    --space-sm:   0.5rem;    /*  8px */
    --space-md:   1rem;      /* 16px */
    --space-lg:   1.5rem;    /* 24px */
    --space-xl:   2rem;      /* 32px */
    --space-2xl:  3rem;      /* 48px */
    --space-3xl:  4rem;      /* 64px */
}

/* ==========================================================================
   2. BORDER RADIUS SCALE
   ========================================================================== */
:root {
    --radius-sm:  0.25rem;   /*  4px */
    --radius-md:  0.5rem;    /*  8px */
    --radius-lg:  0.75rem;   /* 12px */
    --radius-xl:  1rem;      /* 16px */
    --radius-pill: 9999px;
}

/* ==========================================================================
   3. SHADOW SCALE
   ========================================================================== */
:root {
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg:  0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08);
    --shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.10);
    --shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   4. TYPOGRAPHY SCALE
   ========================================================================== */
:root {
    --font-size-xs:   0.75rem;   /* 12px */
    --font-size-sm:   0.875rem;  /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg:   1.125rem;  /* 18px */
    --font-size-xl:   1.25rem;   /* 20px */
    --font-size-2xl:  1.5rem;    /* 24px */
    --font-size-3xl:  1.875rem;  /* 30px */
    --font-size-4xl:  2.25rem;   /* 36px */

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:  1.25;
    --line-height-normal: 1.5;
    --line-height-loose:  1.75;
}

/* ==========================================================================
   5. LAYOUT TOKENS
   ========================================================================== */
:root {
    --header-height:    90px;
    --sidebar-width:    16.666667%;   /* Bootstrap col-2 */
    --sidebar-width-collapsed: 60px;
    --body-top-offset:  90px;         /* Must match --header-height */
    --content-padding-x: var(--space-lg);
}

/* ==========================================================================
   6. BRAND COLOR TOKENS
   These supplement Bootstrap/Bootswatch variables with stable brand values
   that don't shift when the user changes their Bootswatch theme.
   ========================================================================== */
:root {
    /* Brand palette — purple-forward, consistent with Pulse default */
    --brand-primary:        #593196;
    --brand-primary-light:  #7b52b8;
    --brand-primary-dark:   #3d1f6e;
    --brand-accent:         #17a2b8;
    --brand-accent-light:   #4dc3d4;

    /* Semantic status colors (stable across themes) */
    --color-success:  #28a745;
    --color-warning:  #ffc107;
    --color-danger:   #dc3545;
    --color-info:     #17a2b8;

    /* Neutral scale */
    --color-neutral-50:  #f9fafb;
    --color-neutral-100: #f3f4f6;
    --color-neutral-200: #e5e7eb;
    --color-neutral-300: #d1d5db;
    --color-neutral-400: #9ca3af;
    --color-neutral-500: #6b7280;
    --color-neutral-600: #4b5563;
    --color-neutral-700: #374151;
    --color-neutral-800: #1f2937;
    --color-neutral-900: #111827;
}

/* ==========================================================================
   7. COMPONENT TOKENS — Cards
   ========================================================================== */
:root {
    --card-border-radius:    var(--radius-lg);
    --card-padding:          var(--space-lg);
    --card-shadow:           var(--shadow-md);
    --card-shadow-hover:     var(--shadow-lg);
    --card-hover-translate:  -4px;
    --card-transition:       all 0.3s ease;
}

/* ==========================================================================
   8. COMPONENT TOKENS — Alerts
   ========================================================================== */
:root {
    --alert-border-left-width: 4px;
    --alert-padding:           var(--space-md) var(--space-lg);
}

/* ==========================================================================
   9. UTILITY CLASSES — Cards
   ========================================================================== */

/* Base interactive card */
.card-tool {
    border: 2px solid transparent;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    cursor: pointer;
    overflow: hidden;
}

.card-tool:hover {
    transform: translateY(var(--card-hover-translate));
    box-shadow: var(--card-shadow-hover);
    border-color: var(--bs-primary);
}

.card-tool .card-body {
    padding: var(--card-padding);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 160px;
}

/* Stat card — used in stats bars */
.card-stat {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    text-align: center;
}

/* Library / content card */
.card-library {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--card-transition);
}

.card-library:hover {
    box-shadow: var(--card-shadow-hover);
}

/* ==========================================================================
   10. UTILITY CLASSES — Typography
   ========================================================================== */

.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }
.text-2xl  { font-size: var(--font-size-2xl); }

.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

/* Page-level heading pattern */
.page-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--bs-border-color);
}

.page-header h1,
.page-header h2 {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}

.page-header .page-header-icon {
    font-size: var(--font-size-2xl);
    color: var(--bs-primary);
}

/* Section title used inside content areas */
.section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Content description text */
.content-description {
    font-size: var(--font-size-base);
    color: var(--bs-secondary-color, var(--color-neutral-500));
    line-height: var(--line-height-normal);
}

/* ==========================================================================
   11. UTILITY CLASSES — Spacing helpers
   ========================================================================== */

.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }

/* ==========================================================================
   12. UTILITY CLASSES — Alerts
   ========================================================================== */

/* Accent-left alert variant */
.alert-accent {
    border-left: var(--alert-border-left-width) solid var(--bs-primary);
    padding: var(--alert-padding);
}

.alert-accent-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
    border-left: var(--alert-border-left-width) solid var(--color-info);
}

.alert-accent-info .alert-link {
    color: #0c5460;
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
}

/* ==========================================================================
   13. UTILITY CLASSES — Form labels
   ========================================================================== */

/* Replace inline style="color: var(--bs-primary)" on form labels */
.label-primary {
    color: var(--bs-primary);
}

/* ==========================================================================
   14. UTILITY CLASSES — Coming Soon overlay
   ========================================================================== */

.coming-soon-card {
    position: relative;
    cursor: not-allowed !important;
}

.coming-soon-card[aria-disabled="true"] {
    cursor: not-allowed !important;
}

.coming-soon-card .card-body {
    filter: blur(3px);
    -webkit-filter: blur(3px);
    transition: filter 0.3s ease;
}

.coming-soon-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-radius: var(--card-border-radius);
}

.coming-soon-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--bs-primary);
}

.coming-soon-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
    border-color: var(--bs-secondary) !important;
}

/* ==========================================================================
   15. UTILITY CLASSES — Stats bar
   ========================================================================== */

.stats-bar {
    background: var(--bs-light);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--shadow-sm);
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--bs-primary);
    display: block;
    line-height: var(--line-height-tight);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--bs-secondary-color, var(--color-neutral-500));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--space-xs);
    display: block;
}

/* ==========================================================================
   16. UTILITY CLASSES — Content icon
   ========================================================================== */

.content-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
    display: block;
}

.content-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-sm);
    color: var(--bs-dark);
}

/* ==========================================================================
   17. LAYOUT — Page content wrapper
   ========================================================================== */

.page-content {
    padding: var(--space-md) var(--content-padding-x);
}

/* ==========================================================================
   18. OVERRIDES — Global element defaults
   ========================================================================== */

h1 {
    font-size: 1.8em;
}

/* Ensure body text is readable */
body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}