/* ═══════════════════════════════════════════════════════════════════════════
   HANLANCORE DESIGN TOKENS
   Centralized design system: Foundation → Spacing → Typography → Components
   ═══════════════════════════════════════════════════════════════════════════ */

: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: SPACING SCALE (--spacing-*)
     Based on 8px unit for consistent rhythm
     ═══════════════════════════════════════════════════════════════════════════ */
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 1);    /* 8px */
  --spacing-sm: calc(var(--spacing-unit) * 2);    /* 16px */
  --spacing-md: calc(var(--spacing-unit) * 3);    /* 24px */
  --spacing-lg: calc(var(--spacing-unit) * 5);    /* 40px */
  --spacing-xl: calc(var(--spacing-unit) * 8);    /* 64px */
  --spacing-2xl: calc(var(--spacing-unit) * 12);  /* 96px */
  --spacing-3xl: calc(var(--spacing-unit) * 16);  /* 128px */

  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 1: TYPOGRAPHY SCALE (--font-*, --type-*)
     Based on major third ratio (1.25) for harmonious hierarchy
     ═══════════════════════════════════════════════════════════════════════════ */
  --font-base: 16px;
  --type-scale: 1.25; /* Major third ratio */

  /* Font sizes with fluid scaling using clamp() */
  --font-xs: clamp(0.75rem, 0.8rem + 0.2vw, 0.8rem);   /* ~12px */
  --font-sm: clamp(0.875rem, 0.9rem + 0.2vw, 1rem);    /* ~14-16px */
  --font-base-size: clamp(1rem, 1rem + 0.2vw, 1.125rem); /* 16-18px */
  --font-md: clamp(1.125rem, 1.25rem + 0.3vw, 1.5rem);  /* ~18-24px */
  --font-lg: clamp(1.5rem, 1.563rem + 0.5vw, 1.953rem); /* ~24-31px */
  --font-xl: clamp(1.875rem, 1.953rem + 0.7vw, 2.441rem); /* ~30-39px */
  --font-2xl: clamp(2.25rem, 2.441rem + 1vw, 3.052rem);   /* ~36-49px */
  --font-3xl: clamp(3rem, 3.052rem + 1.5vw, 3.815rem);    /* ~48-61px */

  /* Heading scales (mapped to font sizes) */
  --font-h6: var(--font-sm);
  --font-h5: var(--font-base-size);
  --font-h4: var(--font-md);
  --font-h3: var(--font-lg);
  --font-h2: var(--font-xl);
  --font-h1: var(--font-2xl);
  --font-hero: var(--font-3xl);

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* Letter spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ═══════════════════════════════════════════════════════════════════════════
     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: var(--spacing-lg);
  --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: var(--spacing-md);
  --card-radius: var(--global-radius);
  --card-gap: var(--spacing-sm);
  --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: var(--font-sm);

  /* ═══════════════════════════════════════════════════════════════════════════
     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);
}