/**
 * Dogology Design Tokens
 *
 * Single source of truth for colors, typography, spacing, and radii.
 * Extracted from MindMap (dogology-mindmap/) and Course 101
 * (dogology-commerce/assets/css/course-101-landing.css) to keep the
 * three surfaces visually consistent.
 *
 * All theme + shortcode CSS should reference these vars instead of
 * hard-coding values. When a token changes here, every consuming
 * surface updates together.
 */

:root {
    /* ---------- Color: brand ---------- */
    --dgl-primary: #0076BA;
    --dgl-secondary: #00AB8E;
    --dgl-gradient: linear-gradient(135deg, #00AB8E 0%, #0076BA 100%);
    --dgl-gradient-on-dark: linear-gradient(135deg, #5EEAD4 0%, #7DD3FC 100%);
    --dgl-gradient-soft: linear-gradient(135deg, rgba(0, 171, 142, 0.08) 0%, rgba(0, 118, 186, 0.08) 100%);

    /* ---------- Color: text (premium-minimal — matches MindMap + 101) ---------- */
    --dgl-ink: #0F172A;          /* primary headings */
    --dgl-ink-2: #1E293B;        /* secondary headings */
    --dgl-text-primary: #0F172A; /* alias of --dgl-ink */
    --dgl-text-secondary: #475569;
    --dgl-text-muted: #64748B;
    --dgl-text-inverse: #FFFFFF;

    /* ---------- Color: surface ---------- */
    --dgl-bg-light: #f8fafc;
    --dgl-bg-warm: #FAFAFA;          /* matches MindMap --mm-bg-warm */
    --dgl-bg-white: #FFFFFF;
    --dgl-bg-cream: #FAF6EF;         /* warm off-white — "home/family" register, alternate section bg */
    --dgl-bg-sage: #EEF1EA;          /* warm sage — gravity sections (principles, mission moments) */
    --dgl-border: #EEF0F4;
    --dgl-border-strong: #E2E8F0;
    --dgl-line-hover: rgba(0, 171, 142, 0.22);  /* card border on hover */

    /* ---------- Color: brand RGB triplets (for rgba() composition) ---------- */
    --dgl-primary-rgb: 0, 118, 186;
    --dgl-secondary-rgb: 0, 171, 142;
    --dgl-ink-rgb: 15, 23, 42;

    /* ---------- Color: accent (use sparingly) ---------- */
    --dgl-accent-red: #FF6B6B;       /* iceberg "symptoms" / above-water */
    --dgl-accent-green: #059669;     /* iceberg "mechanisms" / below-water */
    --dgl-accent-amber: #F59E0B;     /* warnings, highlights */

    /* ---------- Shadow (premium-minimal — matches MindMap + 101) ---------- */
    --dgl-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --dgl-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --dgl-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --dgl-shadow-card-hover: 0 16px 40px rgba(15, 23, 42, 0.06);  /* MindMap card lift */
    --dgl-shadow-cta-glow: 0 8px 22px -6px rgba(0, 171, 142, 0.32); /* 101 CTA glow */
    --dgl-shadow-cta-glow-hover: 0 12px 30px -6px rgba(0, 171, 142, 0.42);
    --dgl-shadow-glow: 0 10px 20px -10px rgba(0, 118, 186, 0.4);   /* MindMap btn lift */

    /* ---------- Easing curves ---------- */
    --dgl-ease-card: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --dgl-ease-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---------- Radius ---------- */
    --dgl-radius-sm: 8px;
    --dgl-radius-md: 12px;
    --dgl-radius-card: 20px;
    --dgl-radius-pill: 9999px;

    /* ---------- Typography ---------- */
    --dgl-font-display: 'Kanit', 'Noto Sans Thai', 'Sarabun', sans-serif;
    --dgl-font-body: 'Noto Sans Thai', 'Sarabun', 'Kanit', sans-serif;

    --dgl-text-xs: 0.78rem;
    --dgl-text-sm: 0.9rem;
    --dgl-text-base: 1rem;
    --dgl-text-lg: 1.125rem;
    --dgl-text-xl: 1.25rem;
    --dgl-text-2xl: 1.5rem;
    --dgl-text-3xl: 1.875rem;
    --dgl-text-4xl: 2.25rem;
    --dgl-text-5xl: 3rem;

    --dgl-leading-tight: 1.2;
    --dgl-leading-snug: 1.4;
    --dgl-leading-normal: 1.6;
    --dgl-leading-relaxed: 1.7;

    --dgl-tracking-eyebrow: 0.1em;

    /* ---------- Spacing ---------- */
    --dgl-space-1: 0.25rem;
    --dgl-space-2: 0.5rem;
    --dgl-space-3: 0.75rem;
    --dgl-space-4: 1rem;
    --dgl-space-5: 1.25rem;
    --dgl-space-6: 1.5rem;
    --dgl-space-8: 2rem;
    --dgl-space-10: 2.5rem;
    --dgl-space-12: 3rem;
    --dgl-space-16: 4rem;

    --dgl-section-padding: 80px;
    --dgl-section-padding-mobile: 48px;

    /* ---------- Transitions ---------- */
    --dgl-transition-base: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --dgl-transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---------- Layout ---------- */
    --dgl-content-max: 1200px;
    --dgl-content-narrow: 720px;

    /* ---------- Header offset ----------
     * Single source of truth for the fixed-header height.
     * Pages that want a full-bleed hero under the translucent glass header
     * should let the photo extend to top:0 (no body padding, no spacer),
     * and reference --dgl-header-h for inner content breathing room.
     * Pages with boxed content at the top should add
     * `padding-top: var(--dgl-header-h)` to their main wrapper.
     * scroll-padding-top on <html> uses this token so anchor jumps
     * land cleanly under the header. */
    --dgl-header-h: 72px;
}

@media (min-width: 1024px) {
    :root { --dgl-header-h: 80px; }
}

/* Anchor-jump offset, site-wide. */
html { scroll-padding-top: var(--dgl-header-h); }

/* ---------- Reusable button patterns ---------- */
/*
 * Use as base classes; override per-component if needed.
 * Pattern matched to MindMap landing + 101 course landing.
 */

.dgl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dgl-space-2);
    padding: 0.75rem 2rem;
    font-family: var(--dgl-font-display);
    font-weight: 600;
    font-size: var(--dgl-text-base);
    text-decoration: none;
    border-radius: var(--dgl-radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--dgl-transition-base), box-shadow var(--dgl-transition-base), background var(--dgl-transition-base);
    line-height: 1;
}

.dgl-btn--primary {
    background: var(--dgl-gradient);
    color: var(--dgl-text-inverse);
    box-shadow: var(--dgl-shadow-glow);
}

.dgl-btn--primary:hover {
    transform: translateY(-3px) scale(1.02);
    color: var(--dgl-text-inverse);
}

.dgl-btn--secondary {
    background: var(--dgl-bg-white);
    color: var(--dgl-primary);
    border-color: var(--dgl-primary);
}

.dgl-btn--secondary:hover {
    transform: translateY(-3px);
    background: var(--dgl-primary);
    color: var(--dgl-text-inverse);
}

.dgl-btn--ghost {
    background: transparent;
    color: var(--dgl-text-inverse);
    border-color: rgba(255, 255, 255, 0.6);
}

.dgl-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--dgl-text-inverse);
}

/* ---------- Reusable card pattern ---------- */
.dgl-card {
    background: var(--dgl-bg-white);
    border: 1px solid var(--dgl-border);
    border-radius: var(--dgl-radius-card);
    box-shadow: var(--dgl-shadow-sm);
    transition: transform var(--dgl-transition-base), box-shadow var(--dgl-transition-base);
}

.dgl-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--dgl-shadow-md);
}

/* ---------- Eyebrow / overline label ---------- */
.dgl-eyebrow {
    display: inline-block;
    font-family: var(--dgl-font-display);
    font-size: var(--dgl-text-xs);
    font-weight: 700;
    letter-spacing: var(--dgl-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--dgl-secondary);
    margin-bottom: var(--dgl-space-3);
}

/* Gradient-clipped eyebrow — borrowed from MindMap landing's .mm-eyebrow.
   Use on light backgrounds. For dark/photo backgrounds use .dgl-eyebrow--on-dark. */
.dgl-eyebrow--gradient {
    background: var(--dgl-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.dgl-eyebrow--on-dark {
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.14em;
}

/* ---------- Gradient text utility ---------- */
.dgl-gradient-text {
    background: var(--dgl-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}