/* ═══════════════════════════════════════════════════════════════════════════
   HANLANCORE DESIGN TOKENS
   Hierarchical styling system: Global → Glass → Group → Instance
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 0: FOUNDATION (non-editable primitives)
     ═══════════════════════════════════════════════════════════════════════════ */
  color-scheme: dark;

  /* Background */
  --bg: #050505;
  --bg-2: #07070a;

  /* Text */
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.66);
  --faint: rgba(255, 255, 255, 0.4);
  --line: rgba(255, 255, 255, 0.12);

  /* Gradient colors */
  --g-blue: #3B82F6;
  --g-indigo: #6366F1;
  --g-purple: #8B5CF6;
  --g-violet: #A855F7;
  --g-pink: #EC4899;
  --g-rose: #F43F5E;
  --g-red: #EF4444;
  --g-orange: #F97316;
  --g-amber: #EAB308;
  --g-yellow: #FBBF24;

  /* Gradient compositions */
  --rainbow: linear-gradient(
    120deg,
    rgba(59, 130, 246, 0.95),
    rgba(99, 102, 241, 0.92),
    rgba(139, 92, 246, 0.92),
    rgba(236, 72, 153, 0.9),
    rgba(239, 68, 68, 0.88),
    rgba(249, 115, 22, 0.86),
    rgba(234, 179, 8, 0.84)
  );
  --rainbow-soft: linear-gradient(
    120deg,
    rgba(59, 130, 246, 0.65),
    rgba(99, 102, 241, 0.6),
    rgba(139, 92, 246, 0.58),
    rgba(236, 72, 153, 0.56),
    rgba(239, 68, 68, 0.54),
    rgba(249, 115, 22, 0.52),
    rgba(234, 179, 8, 0.5)
  );
  --ring: conic-gradient(
    from 90deg,
    rgba(59, 130, 246, 0.9),
    rgba(99, 102, 241, 0.9),
    rgba(139, 92, 246, 0.88),
    rgba(236, 72, 153, 0.88),
    rgba(239, 68, 68, 0.9),
    rgba(249, 115, 22, 0.88),
    rgba(234, 179, 8, 0.9),
    rgba(59, 130, 246, 0.9)
  );
  --glass-border-gradient: linear-gradient(
    125deg,
    rgba(59, 130, 246, 0.15),
    rgba(99, 102, 241, 0.12),
    rgba(139, 92, 246, 0.1),
    rgba(236, 72, 153, 0.08),
    rgba(239, 68, 68, 0.06),
    rgba(249, 115, 22, 0.05),
    rgba(234, 179, 8, 0.04)
  );

  /* Noise texture */
  --noise-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");

  /* Easing functions */
  --ease-ios: cubic-bezier(0.22, 0.9, 0.2, 1);
  --ease-in: cubic-bezier(0.3, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 1: GLOBAL TOKENS (--global-*)
     Site-wide values, affect everything
     ═══════════════════════════════════════════════════════════════════════════ */
  --global-radius: 28px;
  --global-radius-pill: 999px;
  --global-shadow: 0 26px 80px rgba(0, 0, 0, 0.72);
  --global-border-color: rgba(255, 255, 255, 0.12);
  --global-border-width: 1px;
  --global-transition-duration: 350ms;

  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 1: GLASS TOKENS (--glass-*)
     Global glass morphism parameters
     ═══════════════════════════════════════════════════════════════════════════ */
  --glass-blur: 28px;
  --glass-saturate: 145%;
  --glass-bg-opacity: 0.52;
  --glass-border-opacity: 0.12;
  --glass-bg: rgba(14, 14, 18, var(--glass-bg-opacity));
  --glass-border: rgba(255, 255, 255, var(--glass-border-opacity));

  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 2: MODAL GROUP TOKENS (--modal-*)
     Applies to: .overlay__panel, .case-study__panel, .mobile-drawer__panel
     ═══════════════════════════════════════════════════════════════════════════ */
  --modal-padding: 32px;
  --modal-radius: 36px;
  --modal-backdrop-blur: 60px;
  --modal-border-color: var(--global-border-color);
  --modal-shadow: 0 50px 140px rgba(0, 0, 0, 0.75);
  --modal-bg-opacity: 0.56;

  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 2: CARD GROUP TOKENS (--card-*)
     Applies to: .card, .product, .profilecard, .about-card, .cs-masonry__item
     ═══════════════════════════════════════════════════════════════════════════ */
  --card-padding: 24px;
  --card-radius: var(--global-radius);
  --card-gap: 16px;
  --card-border-color: var(--global-border-color);
  --card-shadow: var(--global-shadow);

  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 2: BUTTON GROUP TOKENS (--btn-*)
     Applies to: .pill, .tag, .iconbtn, .overlay__close
     ═══════════════════════════════════════════════════════════════════════════ */
  --btn-padding-y: 10px;
  --btn-padding-x: 14px;
  --btn-radius: var(--global-radius-pill);
  --btn-border-color: rgba(255, 255, 255, 0.14);
  --btn-bg: rgba(255, 255, 255, 0.09);
  --btn-font-size: 14px;

  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 2: NAVIGATION GROUP TOKENS (--nav-*)
     Applies to: .topbar, .topbar__bar, .dock, .mobile-drawer
     ═══════════════════════════════════════════════════════════════════════════ */
  --nav-height: 88px;
  --nav-padding: 14px;
  --nav-blur: 28px;
  --nav-border-color: rgba(255, 255, 255, 0.14);
  --nav-shadow: 0 26px 90px rgba(0, 0, 0, 0.72);

  /* ═══════════════════════════════════════════════════════════════════════════
     LEGACY ALIASES (for backwards compatibility)
     ═══════════════════════════════════════════════════════════════════════════ */
  --radius: var(--global-radius);
  --squircle: 42px;
  --topbar-h: var(--nav-height);
  --shadow: var(--global-shadow);
  --shadow-colored: 0 0 0 0;
  --glass: rgba(18, 18, 22, 0.46);
  --glass-2: rgba(12, 12, 16, 0.32);
}