/* ============================================================
   CiCC Theme 4.0 — CSS Variables & Design System
   Layer: base/variables
   ============================================================ */

@layer base {
  :root {
    /* ── Colors ── */
    --cicc-navy:       #0f172a;
    --cicc-blue:       #0057a3;
    --cicc-blue-600:   #004080;
    --cicc-blue-light: #3b82f6;
    --cicc-blue-100:   #eef2ff;
    --cicc-cyan:       #00bcd4;
    --cicc-green:      #16a34a;
    --cicc-green-100:  #dcfce7;
    --cicc-orange:     #f97316;
    --cicc-orange-100: #fff7ed;
    --cicc-red:        #ef4444;
    --cicc-red-100:    #fef2f2;
    --cicc-purple:     #7c3aed;
    --cicc-white:      #ffffff;

    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* ── Typography ── */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* ── Type Scale ── */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */
    --text-5xl:  3rem;       /* 48px */
    --text-6xl:  3.75rem;    /* 60px */

    /* ── Fluid Sizes (clamp) ── */
    --text-hero:   clamp(2.25rem, 5vw, 3.75rem);
    --text-h1:     clamp(2rem, 4vw, 3rem);
    --text-h2:     clamp(1.625rem, 3vw, 2.5rem);
    --text-h3:     clamp(1.25rem, 2vw, 1.5rem);

    /* ── Spacing ── */
    --space-1:  0.25rem;  /* 4px */
    --space-2:  0.5rem;   /* 8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-14: 3.5rem;   /* 56px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-28: 7rem;     /* 112px */
    --space-32: 8rem;     /* 128px */

    /* ── Container ── */
    --container-max:      1320px;
    --container-padding:  24px;

    /* ── Border Radius ── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.12), 0 10px 10px -5px rgba(0,0,0,0.06);
    --shadow-2xl:  0 25px 50px -12px rgba(0,0,0,0.25);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);

    /* ── Transition ── */
    --transition-fast:  150ms ease;
    --transition-base:  300ms ease;
    --transition-slow:  500ms ease;
    --transition-spring: 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* ── Z-Index ── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
    --z-tooltip:   600;

    /* ── Gradients ── */
    --gradient-hero:    linear-gradient(135deg, #0f172a 0%, #0057a3 40%, #3b82f6 100%);
    --gradient-hero-purple: linear-gradient(135deg, #0f172a 0%, #3b0764 40%, #7c3aed 100%);
    --gradient-hero-green:  linear-gradient(135deg, #0f172a 0%, #064e3b 40%, #16a34a 100%);
    --gradient-hero-orange: linear-gradient(135deg, #0f172a 0%, #7c2d12 40%, #f97316 100%);
    --gradient-hero-cyan:   linear-gradient(135deg, #0f172a 0%, #004d40 40%, #00bcd4 100%);
    --gradient-cta:     linear-gradient(135deg, #0f172a 0%, #0057a3 50%, #0077be 100%);
    --gradient-card:    linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));

    /* ── Glass ── */
    --glass-bg:         rgba(255, 255, 255, 0.08);
    --glass-border:     rgba(255, 255, 255, 0.15);
    --glass-blur:       blur(12px);

    /* ── Animation ── */
    --ease-spring:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce:      cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth:      cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:    150ms;
    --duration-normal:  300ms;
    --duration-slow:    600ms;

    /* ── Header Heights ── */
    --topbar-height:  36px;
    --header-height:  68px;
    --total-header-height: calc(var(--topbar-height) + var(--header-height));
  }
}