/**
 * gezenbiri — Master Brand Design System & Central Component Library
 * Version: 2.2 (Production-Ready Design System)
 * 
 * 1. COLOR TOKENS (65-20-10-5 Distribution & Supporting Palette)
 * 2. TYPOGRAPHY SCALE (Plus Jakarta Sans & Instrument Serif)
 * 3. SPACING & RADIUS TOKENS (4/8/12/16/24/32/48/64/96)
 * 4. SHADOW & MOTION TOKENS (180ms fast / 240ms standard / 350ms slow)
 * 5. 12/8/4 MASTER RESPONSIVE GRID TOKENS & UTILITIES
 * 6. MASTER SYSTEM DOT SPECIFICATION (Exact 1.03 optical scale)
 * 7. ACCESSIBILITY & FOCUS-VISIBLE
 * 8. CORE UI COMPONENT LIBRARY (Buttons, Cards, Badges, Modals, Statuses, Toasts)
 */

:root {
    /* ================= 1. COLOR PALETTE ================= */
    /* Core Palette (65-20-10-5 Rule) */
    --gb-cream: #F6F3ED;          /* 65% Primary Canvas / Background */
    --gb-charcoal: #202020;       /* 20% Structure, Headings & Deep Surfaces */
    --gb-coral: #FF4D3D;          /* 10% Action Coral (CTA, System Dot, Active states) */
    --gb-coral-hover: #E03E2F;    /* Hover State for Action Coral */
    --gb-sage: #A8B89A;           /* 5% Sage Green (Nature, Badges, Calming accents) */

    /* Supporting Palette */
    --gb-sky: #A9D5E8;            /* Sky (Air, Escapes, Freshness) */
    --gb-sand: #D8CCBC;           /* Sand (Earth, Warmth, Editorial cards) */
    --gb-stone: #D9D6D1;          /* Stone (Dividers, Borders, Tints) */
    --gb-white: #FFFFFF;          /* Pure White (Cards, Inputs, High contrast) */

    /* Alpha / Soft Variations */
    --gb-coral-soft: rgba(255, 77, 61, 0.12);
    --gb-charcoal-soft: rgba(32, 32, 32, 0.06);
    --gb-sage-soft: rgba(168, 184, 154, 0.20);
    --gb-sky-soft: rgba(169, 213, 232, 0.22);
    --gb-border: #E2DDD5;
    --gb-border-subtle: rgba(32, 32, 32, 0.08);

    /* Universal Aliases for Seamless Integration */
    --cream: #F6F3ED;
    --charcoal: #202020;
    --coral: #FF4D3D;
    --coral-hover: #E03E2F;
    --coral-soft: rgba(255, 77, 61, 0.12);
    --sage: #A8B89A;
    --sage-soft: rgba(168, 184, 154, 0.20);
    --sky: #A9D5E8;
    --sky-soft: rgba(169, 213, 232, 0.22);
    --sand: #D8CCBC;
    --stone: #D9D6D1;
    --white: #FFFFFF;
    --border: #E2DDD5;
    --border-line: #E2DDD5;
    --border-card: #E2DDD5;
    --border-subtle: rgba(32, 32, 32, 0.08);

    /* ================= 2. TYPOGRAPHY ================= */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Scale */
    --gb-text-display-xl: 72px;
    --gb-text-display: 48px;
    --gb-text-h1: 36px;
    --gb-text-h2: 26px;
    --gb-text-h3: 20px;
    --gb-text-body-lg: 17px;
    --gb-text-body: 14.5px;
    --gb-text-small: 12.5px;
    --gb-text-caption: 10.5px;

    /* Weights */
    --gb-weight-logo: 900;
    --gb-weight-display: 800;
    --gb-weight-heading: 700;
    --gb-weight-semibold: 600;
    --gb-weight-medium: 500;
    --gb-weight-regular: 400;

    /* ================= 3. SPACING & RADIUS ================= */
    --gb-space-1: 4px;
    --gb-space-2: 8px;
    --gb-space-3: 12px;
    --gb-space-4: 16px;
    --gb-space-6: 24px;
    --gb-space-8: 32px;
    --gb-space-12: 48px;
    --gb-space-16: 64px;
    --gb-space-24: 96px;

    --gb-radius-sm: 8px;          /* Controls, tags, inputs */
    --gb-radius-md: 12px;         /* Standard cards */
    --gb-radius-lg: 20px;         /* Large hero cards & Modals */
    --gb-radius-pill: 999px;      /* Pill badges & circular icons */

    /* ================= 4. SHADOW & MOTION ================= */
    --gb-shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.04);
    --gb-shadow-floating: 0 16px 40px rgba(0, 0, 0, 0.12);
    --gb-shadow-overlay: 0 25px 70px rgba(0, 0, 0, 0.16);

    --gb-motion-fast: 180ms ease-out;
    --gb-motion-standard: 240ms cubic-bezier(0.16, 1, 0.3, 1);
    --gb-motion-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);

    /* ================= 5. GRID & CONTAINER TOKENS ================= */
    --gb-container-max: 1200px;
    --gb-gutter-desktop: 24px;
    --gb-gutter-tablet: 20px;
    --gb-gutter-mobile: 16px;
}

/* ================= 6. MASTER SYSTEM DOT SPECIFICATION ================= */
/* Single Source of Truth for gezenbiri wordmark & dot geometry (Exact 1.03 optical scale) */

.gb-logo,
.brand-logo,
.statement-logo {
    font-family: var(--font-sans);
    font-weight: var(--gb-weight-logo);
    letter-spacing: -0.04em;
    display: inline-flex;
    align-items: baseline;
    color: var(--gb-charcoal);
    line-height: 1;
    text-transform: lowercase;
    text-decoration: none;
}

.gb-system-dot,
.brand-system-dot,
.system-dot {
    display: inline-block;
    width: 0.15em;
    height: 0.15em; /* Fixed: exactly equal base to avoid double-stretch */
    background-color: var(--gb-coral);
    border-radius: 50%;
    margin-left: 0.12em; /* Master 0.12em gap standard */
    transform: scaleY(1.03); /* Master 103% optical stretch */
    flex-shrink: 0;
    vertical-align: baseline;
}

/* Live Dot for active/real-time state indication */
.gb-live-dot,
.live-badge-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--gb-coral);
    transform: scaleY(1.03);
    position: relative;
    flex-shrink: 0;
}

.gb-live-dot.pulsing::after,
.live-badge-dot::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 1.5px solid var(--gb-coral);
    animation: gb-live-pulse 1.8s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes gb-live-pulse {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* ================= 7. ACCESSIBILITY & FOCUS-VISIBLE ================= */
:focus-visible {
    outline: 2.5px solid var(--gb-coral);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Minimum 44x44 touch target helper */
.gb-touch-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ================= 8. RESPONSIVE GRID SYSTEM (12 / 8 / 4) ================= */
.gb-container {
    width: 100%;
    max-width: var(--gb-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gb-gutter-desktop);
    padding-right: var(--gb-gutter-desktop);
}

.gb-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gb-gutter-desktop);
}

@media (max-width: 960px) {
    .gb-container {
        padding-left: var(--gb-gutter-tablet);
        padding-right: var(--gb-gutter-tablet);
    }
    .gb-grid-12 {
        grid-template-columns: repeat(8, 1fr);
        gap: var(--gb-gutter-tablet);
    }
}

@media (max-width: 600px) {
    .gb-container {
        padding-left: var(--gb-gutter-mobile);
        padding-right: var(--gb-gutter-mobile);
    }
    .gb-grid-12 {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--gb-gutter-mobile);
    }
}

/* ================= 8. REUSABLE UI COMPONENT LIBRARY ================= */

/* Buttons */
.gb-btn {
    font-family: var(--font-sans);
    font-size: var(--gb-text-body);
    font-weight: var(--gb-weight-heading);
    padding: 12px 24px;
    border-radius: var(--gb-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform var(--gb-motion-fast), box-shadow var(--gb-motion-fast), background-color var(--gb-motion-fast);
    line-height: 1.2;
}

.gb-btn-primary {
    background-color: var(--gb-coral);
    color: var(--gb-white);
    border-color: var(--gb-coral);
    box-shadow: 0 4px 14px rgba(255, 77, 61, 0.25);
}

.gb-btn-primary:hover {
    background-color: var(--gb-coral-hover);
    border-color: var(--gb-coral-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 77, 61, 0.35);
}

.gb-btn-dark {
    background-color: var(--gb-charcoal);
    color: var(--gb-white);
    border-color: var(--gb-charcoal);
}

.gb-btn-dark:hover {
    background-color: var(--gb-coral);
    border-color: var(--gb-coral);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 77, 61, 0.25);
}

.gb-btn-secondary {
    background-color: var(--gb-white);
    color: var(--gb-charcoal);
    border-color: var(--gb-border);
}

.gb-btn-secondary:hover {
    background-color: var(--gb-cream);
    border-color: var(--gb-charcoal);
}

.gb-btn-ghost {
    background-color: transparent;
    color: var(--gb-charcoal);
    border-color: transparent;
}

.gb-btn-ghost:hover {
    color: var(--gb-coral);
}

/* Badges & Tags */
.gb-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--gb-radius-pill);
    background-color: var(--gb-white);
    color: var(--gb-charcoal);
    border: 1px solid var(--gb-border);
}

.gb-tag-coral {
    background-color: var(--gb-coral-soft);
    color: var(--gb-coral);
    border-color: rgba(255, 77, 61, 0.25);
}

.gb-tag-sage {
    background-color: var(--gb-sage-soft);
    color: #4A633E;
    border-color: rgba(168, 184, 154, 0.35);
}

/* Status Classes */
.gb-status-open {
    color: #386641;
    background-color: rgba(56, 102, 65, 0.12);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--gb-radius-pill);
    font-size: 12px;
}

.gb-status-limited {
    color: var(--gb-coral);
    background-color: var(--gb-coral-soft);
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--gb-radius-pill);
    font-size: 12px;
}

.gb-status-full {
    color: #777;
    background-color: rgba(0, 0, 0, 0.06);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--gb-radius-pill);
    font-size: 12px;
}

/* Cards */
.gb-card {
    background-color: var(--gb-white);
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-md);
    overflow: hidden;
    box-shadow: var(--gb-shadow-subtle);
    transition: transform var(--gb-motion-standard), box-shadow var(--gb-motion-standard), border-color var(--gb-motion-standard);
}

.gb-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gb-shadow-floating);
    border-color: rgba(255, 77, 61, 0.35);
}

/* Form Inputs */
.gb-input {
    font-family: var(--font-sans);
    font-size: var(--gb-text-body);
    padding: 12px 16px;
    border-radius: var(--gb-radius-sm);
    border: 1px solid var(--gb-border);
    background-color: var(--gb-white);
    color: var(--gb-charcoal);
    outline: none;
    transition: border-color var(--gb-motion-fast);
    width: 100%;
}

.gb-input:focus {
    border-color: var(--gb-coral);
}

/* Prototype Disclaimer Bar */
.gb-prototype-disclaimer {
    text-align: center;
    font-size: 11.5px;
    color: #777;
    padding: 16px 20px;
    border-top: 1px dashed var(--gb-border);
    line-height: 1.5;
    background: var(--gb-cream);
}

/* ================= 10. STANDARDIZED MASTER TOP BRAND NAVIGATION ================= */
.top-brand-nav {
    width: 100%;
    max-width: var(--gb-container-max);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 24px auto;
    padding: 0 4px;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-nav-back {
    background-color: var(--gb-white);
    color: var(--gb-charcoal);
    text-decoration: none;
    padding: 8px 18px;
    border-radius: var(--gb-radius-pill);
    font-size: 12.5px;
    font-weight: 800;
    border: 1px solid var(--gb-border);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--gb-motion-fast);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-nav-back:hover {
    background-color: var(--gb-coral);
    color: var(--gb-white);
    border-color: var(--gb-coral);
    transform: translateX(-2px);
    box-shadow: 0 4px 14px rgba(255, 77, 61, 0.25);
}

.quick-nav-links {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.quick-nav-links a {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    text-decoration: none;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-pill);
    transition: all var(--gb-motion-fast);
    backdrop-filter: blur(8px);
}

.quick-nav-links a:hover {
    background: var(--gb-white);
    color: var(--gb-coral);
    border-color: var(--gb-coral);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.quick-nav-links a.active {
    background: var(--gb-coral-soft);
    color: var(--gb-coral);
    font-weight: 800;
    border-color: rgba(255, 77, 61, 0.35);
}

@media (max-width: 960px) {
    .top-brand-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .quick-nav-links {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }
}