/* ====================================================================
   Creativelines — Extended Design Tokens (Phase 1)
   Refined shadows, gradients, opacities, z-index map, breakpoints,
   and component-level tokens.
   ==================================================================== */

:root {
    /* ─── Z-Index Map (single source of truth) ─────────────────── */
    --z-base:           0;
    --z-raised:         10;
    --z-sticky:         50;
    --z-header:         100;
    --z-dropdown:       200;
    --z-overlay:        500;
    --z-modal:          600;
    --z-toast:          700;
    --z-tooltip:        800;
    --z-loader:         1000;
    --z-cursor:         9999;

    /* ─── Opacity Scale ────────────────────────────────────────── */
    --o-0:   0;
    --o-5:   0.05;
    --o-10:  0.1;
    --o-20:  0.2;
    --o-30:  0.3;
    --o-40:  0.4;
    --o-50:  0.5;
    --o-60:  0.6;
    --o-70:  0.7;
    --o-80:  0.8;
    --o-90:  0.9;
    --o-100: 1;

    /* ─── Refined Shadow System ────────────────────────────────── */
    --shadow-xs:        0 1px 2px rgba(0,0,0,0.08);
    --shadow-sm:        0 2px 8px rgba(0,0,0,0.12);
    --shadow-md:        0 8px 24px rgba(0,0,0,0.18);
    --shadow-lg:        0 20px 60px rgba(0,0,0,0.30);
    --shadow-xl:        0 32px 80px rgba(0,0,0,0.40);
    --shadow-inset:     inset 0 2px 4px rgba(0,0,0,0.06);

    /* Brand glows */
    --glow-yellow:      0 0 32px rgba(232,185,35,0.40);
    --glow-yellow-lg:   0 0 60px rgba(232,185,35,0.55);
    --glow-red:         0 0 32px rgba(217,32,31,0.40);
    --glow-red-lg:      0 0 60px rgba(217,32,31,0.55);

    /* ─── Gradient Library ─────────────────────────────────────── */
    --grad-brand:        linear-gradient(135deg, var(--cl-yellow) 0%, var(--cl-red) 100%);
    --grad-brand-soft:   linear-gradient(135deg, color-mix(in srgb, var(--cl-yellow) 70%, transparent) 0%, color-mix(in srgb, var(--cl-red) 70%, transparent) 100%);
    --grad-warm:         linear-gradient(135deg, #FFD447 0%, #E8B923 50%, #D9201F 100%);
    --grad-spotlight:    radial-gradient(circle at center, rgba(232,185,35,0.18) 0%, transparent 65%);
    --grad-fade-down:    linear-gradient(180deg, transparent 0%, var(--cl-bg) 100%);
    --grad-fade-up:      linear-gradient(0deg, transparent 0%, var(--cl-bg) 100%);
    --grad-ink:          linear-gradient(180deg, var(--cl-bg) 0%, var(--cl-bg-alt) 100%);

    /* Mesh background (used on heroes/CTAs) */
    --mesh-bg:           radial-gradient(at 22% 15%, rgba(232,185,35,0.18) 0px, transparent 50%),
                         radial-gradient(at 80% 60%, rgba(217,32,31,0.15) 0px, transparent 55%),
                         radial-gradient(at 50% 90%, rgba(255,212,71,0.10) 0px, transparent 50%);

    /* ─── Border Treatments ────────────────────────────────────── */
    --border-thin:        1px solid var(--cl-border);
    --border-strong:      1.5px solid var(--cl-border-strong);
    --border-accent:      2px solid var(--cl-yellow);
    --border-dashed:      1.5px dashed var(--cl-border-strong);

    /* ─── Component Tokens ─────────────────────────────────────── */
    --card-bg:            var(--cl-bg-elevated);
    --card-border:        var(--cl-border);
    --card-pad:           clamp(1.25rem, 2vw, 2rem);
    --card-radius:        var(--r-lg);
    --card-radius-lg:     var(--r-xl);

    --input-bg:           var(--cl-bg-elevated);
    --input-border:       var(--cl-border);
    --input-border-focus: var(--cl-yellow);
    --input-radius:       var(--r-md);
    --input-pad-y:        0.9em;
    --input-pad-x:        1.1em;

    --modal-bg:           var(--cl-bg-alt);
    --modal-overlay:      rgba(0,0,0,0.65);
    --modal-radius:       var(--r-xl);

    --toast-bg:           var(--cl-bg-elevated);
    --toast-radius:       var(--r-md);
    --toast-pad:          1rem 1.25rem;

    /* ─── Breakpoint Tokens (for use with container queries / JS) ── */
    --bp-xs:  480px;
    --bp-sm:  640px;
    --bp-md:  768px;
    --bp-lg:  1024px;
    --bp-xl:  1280px;
    --bp-2xl: 1536px;

    /* ─── Semantic Status Colors ───────────────────────────────── */
    --status-success:    #2EBE6F;
    --status-success-bg: rgba(46,190,111,0.12);
    --status-warning:    #F5A623;
    --status-warning-bg: rgba(245,166,35,0.14);
    --status-error:      #E5484D;
    --status-error-bg:   rgba(229,72,77,0.14);
    --status-info:       #3D7EFF;
    --status-info-bg:    rgba(61,126,255,0.14);
}

/* Light theme overrides for tokens that need adjustment */
[data-theme="light"] {
    --shadow-xs:        0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:        0 2px 8px rgba(0,0,0,0.06);
    --shadow-md:        0 8px 24px rgba(0,0,0,0.08);
    --shadow-lg:        0 20px 60px rgba(0,0,0,0.12);
    --shadow-xl:        0 32px 80px rgba(0,0,0,0.16);

    --modal-overlay:    rgba(14,14,14,0.50);

    --grad-fade-down:   linear-gradient(180deg, transparent 0%, var(--cl-bg) 100%);
    --grad-ink:         linear-gradient(180deg, var(--cl-offwhite) 0%, #EEEAE0 100%);
}