/**
 * assets/css/modules/_tokens.css
 * CC-26: Single canonical design-token source.
 * Merged from: style.css :root, layout-primitives.css :root, review-surfaces.css :root
 * This file MUST be enqueued before all other module CSS.
 *
 * Conflicts resolved (style.css wins per CC-26 spec):
 *   --glass-bg / --capy-glass-bg: style.css had --glass-bg = rgba(20,25,39,0.4);
 *     layout-primitives had --capy-glass-bg = rgba(20,25,39,0.74) — DIFFERENT values,
 *     different names, both kept. --glass-bg (shallow opacity) used in style.css hero;
 *     --capy-glass-bg (denser) used in cards/surfaces.
 *   --glass-border / --capy-glass-border: style.css --glass-border = rgba(255,255,255,0.1);
 *     layout-primitives --capy-glass-border = rgba(255,255,255,0.1) — SAME value, aliases kept.
 */

:root {
    /* ── Palette ── */
    --capy-dark:         #0b0f19;
    --capy-bg:           #0b0f19;
    --capy-bg-alt:       #0d1117;
    --capy-surface:      rgba(11, 24, 37, 0.85);
    --capy-card:         rgba(11, 24, 37, 0.85);
    --capy-surface-alt:  #ffffff;

    /* ── Gold accent tokens (CC-26) ── */
    --capy-gold:         #fbbf24;   /* canonical accent gold */
    --capy-gold-dark:    #c9a84c;   /* darker amber: borders, secondary CTA text, gradient anchors */
    --capy-info:         #3b82f6;   /* info/verified badge accent */

    /* ── CTA / Green (CC-23: green = primary CTA) ── */
    --capy-green:        #22c55e;
    --capy-cta:          var(--capy-green);
    --capy-cta-ink:      #04210f;
    --capy-cta-grad:     linear-gradient(135deg, var(--capy-green) 0%, #16a34a 100%);
    --capy-cta-shadow:   rgba(34, 197, 94, 0.28);

    /* ── Status ── */
    --capy-red:          #ef4444;

    /* ── Text ── */
    --capy-text:         #f1f5f9;
    --capy-text-dim:     rgba(255, 255, 255, 0.7);

    /* ── Borders ── */
    --capy-border:       #1f2937;

    /* ── Typography ── */
    --font-display: 'Playfair Display', serif;
    --font-body:    'DM Sans', sans-serif;

    /* ── Glass surfaces (from style.css hero) ── */
    --glass-bg:          rgba(20, 25, 39, 0.4);
    --glass-border:      rgba(255, 255, 255, 0.1);

    /* ── Glass surfaces (from layout-primitives.css — denser for cards) ── */
    --capy-glass-bg:          rgba(20, 25, 39, 0.74);
    --capy-glass-bg-hover:    rgba(24, 30, 44, 0.8);
    --capy-glass-border:      rgba(255, 255, 255, 0.1);
    --capy-glass-shadow:      0 18px 46px rgba(0, 0, 0, 0.28);
    --capy-glass-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.34), 0 0 28px rgba(251, 191, 36, 0.08);
    --capy-glass-shine:       linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 48%);

    /* ── Spacing ── */
    --spacing-hero-top:    160px;
    --spacing-hero-bottom: 100px;
    --spacing-section:     80px;

    /* ── Layout (from layout-primitives.css) ── */
    --capy-page-gutter:             clamp(16px, 4vw, 40px);
    --capy-container-wide:          1160px;
    --capy-container-content:       900px;
    --capy-header-clearance:        clamp(112px, 10vw, 168px);
    --capy-header-clearance-compact: 76px;
    --capy-flow-gap:                clamp(24px, 4vw, 48px);

    /* ── Review surfaces (from review-surfaces.css) ── */
    --review-surface-width:        860px;
    --review-surface-gutter:       clamp(16px, 4vw, 24px);
    --review-surface-bg:           var(--capy-glass-bg);
    --review-surface-bg-hover:     var(--capy-glass-bg-hover);
    --review-surface-border:       var(--capy-glass-border);
    --review-surface-border-hover: rgba(251, 191, 36, 0.28);
    --review-surface-shadow:       var(--capy-glass-shadow);
    --review-surface-shadow-hover: var(--capy-glass-shadow-hover);
}

/* ── Responsive overrides (from layout-primitives.css) ── */
@media (max-width: 768px) {
    :root {
        --capy-page-gutter: 16px;
        --capy-flow-gap:    28px;

        /* spacing overrides (from style.css) */
        --capy-mobile-gutter:       clamp(0.875rem, 5vw, 1.75rem);
        --capy-mobile-header-block: clamp(4.25rem, 18vw, 5.375rem);
        --capy-mobile-logo-height:  calc(var(--capy-mobile-header-block) * 0.82);
        --spacing-hero-top:         calc(var(--capy-mobile-header-block) + clamp(0.625rem, 3vw, 1.125rem));
        --spacing-hero-bottom:      60px;
        --spacing-section:          40px;
    }
}

@media (max-width: 420px) {
    :root {
        --capy-page-gutter: 15px;
    }
}