/**
 * Jiblotech 2.0
 * Design Tokens
 *
 * Visual direction:
 * Dark / Technical / Editorial / Restrained
 */

:root {

   /* ==========================================
       CORE BRAND
       ========================================== */

   --jb-green: #18A957;
   --jb-green-dark: #0D7139;
   --jb-green-soft: #BFE8CF;


   /* ==========================================
       DARK SYSTEM
       ========================================== */

   --jb-black: #080909;
   --jb-bg: #0B0D0C;
   --jb-surface: #101311;
   --jb-surface-raised: #151916;
   --jb-surface-hover: #1B201D;


   /* ==========================================
       TEXT
       ========================================== */

   --jb-white: #F3F5F2;
   --jb-text: #E7EAE7;
   --jb-text-muted: #8A918C;
   --jb-text-subtle: #5F6762;


   /* ==========================================
       BORDERS
       ========================================== */

   --jb-border: rgba(255, 255, 255, 0.10);
   --jb-border-light: rgba(255, 255, 255, 0.06);
   --jb-border-green: rgba(24, 169, 87, 0.35);


   /* ==========================================
       SEMANTIC
       ========================================== */

   --jb-primary: var(--jb-green);
   --jb-primary-hover: #22C967;

   --jb-background: var(--jb-bg);
   --jb-background-dark: var(--jb-black);

   --jb-surface-default: var(--jb-surface);

   --jb-text-primary: var(--jb-text);
   --jb-text-secondary: var(--jb-text-muted);

   --jb-success: var(--jb-green);


   /* ==========================================
       TYPOGRAPHY
       ========================================== */

   --jb-font-display: "Space Grotesk", sans-serif;
   --jb-font-heading: "Space Grotesk", sans-serif;
   --jb-font-body: "IBM Plex Sans", sans-serif;
   --jb-font-mono: "IBM Plex Mono", monospace;


   /* ==========================================
       FONT WEIGHTS
       ========================================== */

   --jb-font-regular: 400;
   --jb-font-medium: 500;
   --jb-font-semibold: 600;
   --jb-font-bold: 700;


   /* ==========================================
       TYPE SCALE
       ========================================== */

   --jb-text-xs: 0.7rem;
   --jb-text-sm: 0.82rem;
   --jb-text-base: 1rem;
   --jb-text-lg: 1.125rem;
   --jb-text-xl: 1.3rem;

   --jb-text-2xl: clamp(1.5rem, 2vw, 2rem);
   --jb-text-3xl: clamp(2rem, 3vw, 2.8rem);
   --jb-text-4xl: clamp(2.5rem, 4vw, 3.8rem);

   /*
     * Deliberately restrained.
     * We are NOT using a giant 6–8rem hero heading.
     */
   --jb-text-display: clamp(2.7rem, 5vw, 5.2rem);


   /* ==========================================
       LINE HEIGHT
       ========================================== */

   --jb-leading-tight: 1.05;
   --jb-leading-snug: 1.2;
   --jb-leading-normal: 1.55;
   --jb-leading-relaxed: 1.7;


   /* ==========================================
       LAYOUT
       ========================================== */

   --jb-container: 1320px;

   --jb-gutter: clamp(1.25rem, 3vw, 3rem);

   --jb-header-height: 76px;

   --jb-section-space: clamp(5rem, 9vw, 9rem);


   /* ==========================================
       SPACING
       ========================================== */

   --jb-space-1: 0.25rem;
   --jb-space-2: 0.5rem;
   --jb-space-3: 0.75rem;
   --jb-space-4: 1rem;
   --jb-space-5: 1.5rem;
   --jb-space-6: 2rem;
   --jb-space-7: 3rem;
   --jb-space-8: 4rem;
   --jb-space-9: 6rem;


   /* ==========================================
       RADIUS
       ========================================== */

   --jb-radius-sm: 6px;
   --jb-radius-md: 10px;
   --jb-radius-lg: 16px;
   --jb-radius-pill: 999px;


   /* ==========================================
       SHADOWS
       ========================================== */

   --jb-shadow-sm:
      0 4px 20px rgba(0, 0, 0, 0.15);

   --jb-shadow-md:
      0 12px 40px rgba(0, 0, 0, 0.20);


   /* ==========================================
       MOTION
       ========================================== */

   --jb-duration-fast: 160ms;
   --jb-duration-normal: 280ms;
   --jb-duration-slow: 450ms;

   --jb-ease: cubic-bezier(0.22, 1, 0.36, 1);


   /* ==========================================
       Z-INDEX
       ========================================== */

   --jb-z-base: 1;
   --jb-z-dropdown: 100;
   --jb-z-header: 500;
   --jb-z-overlay: 900;
   --jb-z-modal: 1000;


   --jb-accent-blue: #4D8DFF;
   --jb-accent-coral: #FF6B5F;
   --jb-accent-violet: #9B7BFF;

   --jb-accent-blue-soft: rgba(77, 141, 255, 0.14);
   --jb-accent-coral-soft: rgba(255, 107, 95, 0.14);
   --jb-accent-violet-soft: rgba(155, 123, 255, 0.14);
}