/* ==========================================================================
   CITY CAPITAL TRADERS (CCT) — DESIGN SYSTEM TOKENS
   Inspired by www.jeton.com architecture, elevated for institutional private finance.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;450;500;600;700;800&family=Cinzel:wght@500;600;700;800&display=swap');

:root {
  /* --- Brand Color Palette: Obsidian, Deep Slate & Bullion Gold --- */
  --cct-bg: #070a0f;
  --cct-bg-alt: #0c121c;
  --cct-surface: #121a27;
  --cct-surface-hover: #182335;
  --cct-surface-card: rgba(18, 26, 39, 0.85);
  --cct-surface-glass: rgba(18, 26, 39, 0.72);

  /* Gold & Warm Accents */
  --cct-gold: #c5a059;
  --cct-gold-light: #dfbe7d;
  --cct-gold-dark: #967533;
  --cct-gold-glow: rgba(197, 160, 89, 0.22);
  --cct-gold-subtle: rgba(197, 160, 89, 0.08);
  --cct-gold-gradient: linear-gradient(135deg, #dfbe7d 0%, #c5a059 50%, #967533 100%);
  --cct-gold-text: linear-gradient(135deg, #ffffff 0%, #dfbe7d 45%, #c5a059 100%);

  /* Neutral Spectrum */
  --cct-white: #ffffff;
  --cct-offwhite: #f8fafc;
  --cct-slate-100: #e2e8f0;
  --cct-slate-300: #cbd5e1;
  --cct-slate-400: #94a3b8;
  --cct-slate-500: #64748b;
  --cct-slate-700: #334155;
  --cct-slate-800: #1e293b;
  --cct-slate-900: #0f172a;

  /* ESG & Functional Accents */
  --cct-emerald: #10b981;
  --cct-emerald-glow: rgba(16, 185, 129, 0.2);
  --cct-blue-accent: #3b82f6;

  /* CCT Exact Logo Palette (from CCT_logo1.svg #08a0fb & CCT_logo2.svg #ddfdfe) */
  --cct-logo-blue: #08a0fb;
  --cct-logo-ice: #ddfdfe;
  --cct-logo-cerulean: #0077b6;
  --cct-logo-navy: #1d2a4e;

  /* Harmonized Complementary Spectrum: Pure Yellow / Bauhaus Canary, Warm Yellow, Fresh Green */
  --cct-orange: #ffe600; /* Shifted from orange to vibrant Bauhaus canary yellow */
  --cct-orange-light: #fef08a;
  --cct-orange-glow: rgba(255, 230, 0, 0.35);
  --cct-yellow: #facc15; /* Pure sun yellow */
  --cct-yellow-light: #fef9c3;
  --cct-yellow-glow: rgba(250, 204, 21, 0.3);
  --cct-green: #10b981;
  --cct-green-fresh: #34d399;
  --cct-green-glow: rgba(52, 211, 153, 0.25);

  /* Gradients combining logo blues and complementary accents */
  --cct-gradient-logo: linear-gradient(135deg, #08a0fb 0%, #0077b6 60%, #ddfdfe 100%);
  --cct-gradient-warm: linear-gradient(135deg, #ffe600 0%, #facc15 100%);
  --cct-gradient-spectrum: linear-gradient(135deg, #08a0fb 0%, #34d399 50%, #ffe600 100%);

  /* CCT Logo Blue Spectrum (Cerulean, Cyan & Deep Navy) */
  --cct-navy-deep: #030a16;
  --cct-blue-dark: #023e8a;
  --cct-blue-cerulean: #0077b6;
  --cct-blue-sky: #0096c7;
  --cct-blue-cyan: #00b4d8;
  --cct-blue-aqua: #90e0ef;
  --cct-blue-glow: rgba(8, 160, 251, 0.35);
  --cct-cyan-glow: rgba(221, 253, 254, 0.45);
  --cct-blue-gradient: linear-gradient(135deg, #023e8a 0%, #08a0fb 50%, #ddfdfe 100%);
  --cct-cyan-gradient: linear-gradient(135deg, #08a0fb 0%, #00b4d8 50%, #ddfdfe 100%);
  --cct-brand-combo: linear-gradient(135deg, #08a0fb 0%, #34d399 45%, #fcd34d 80%, #ff9e58 100%);

  /* Subtle Borders & Dividers */
  --cct-border: rgba(255, 255, 255, 0.08);
  --cct-border-gold: rgba(197, 160, 89, 0.25);
  --cct-border-hover: rgba(197, 160, 89, 0.55);

  /* Typography Scale (Pure Geometric Sans-Serif / Bauhaus Aesthetic) */
  --font-main: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-bauhaus: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --title-1: clamp(56px, 19.067px + 9.47vw, 160px);
  --title-2: clamp(44px, 24.55px + 5.5vw, 110px);
  --title-3: clamp(36px, 24.1px + 3.05vw, 72px);
  --title-4: clamp(28px, 20.48px + 2.44vw, 54px);
  --title-5: clamp(24px, 18.76px + 1.6vw, 40px);
  --subhead-1: clamp(20px, 17.14px + 0.99vw, 30px);
  --subhead-2: clamp(17px, 15.52px + 0.38vw, 22px);
  --subhead-3: clamp(16px, 15.42px + 0.15vw, 18px);
  --body: 16px;
  --body-small: 14px;
  --caption: 12px;
  --caption-small: 10px;

  /* Line Heights */
  --lh-tight: 1.2;
  --lh-heading: 1.22;
  --lh-subhead: 1.35;
  --lh-body: 1.6;

  /* Grid Tokens */
  --grid-columns: 16;
  --grid-gap: clamp(8px, -1.97px + 1.53vw, 24px);
  --grid-half-gap: calc(var(--grid-gap) * 0.5);
  --grid-margin: clamp(16px, 2.896px + 3.36vw, 64px);
  --grid-padding: calc(var(--grid-margin) - var(--grid-gap) * 0.5);
  --grid-width: calc(100vw - var(--grid-margin) * 2);

  /* Elevation Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 8px 32px rgba(197, 160, 89, 0.15);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.35s;
  --duration-slow: 0.65s;
}