/* ==========================================================
   LK CAPITAL DESIGN TOKENS
   ========================================================== */

:root {

  /* ========================================================
     COLORS
     ======================================================== */

  --clr-primary: #061C2B;
  --clr-secondary: #145E91;
  --clr-accent: #FF8201;

  --clr-white: #FFFFFF;
  --clr-bg-light: #f8f8f8;
  --clr-card: #E3E3E3;

  --clr-heading: #061C2B;
  --clr-body: #686868;

  --clr-border: #FF8201;


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

  --ff-heading: "Helvetica", sans-serif;
  --ff-body: "Inter", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-display: 56px;

  --fs-h1: 48px;
  --fs-h2: 40px;
  --fs-h3: 24px;
  --fs-h4: 20px;

  --fs-body-lg: 20px;
  --fs-body: 18px;
  --fs-small: 12px;

  --fs-button: 18px;
  --fs-nav: 18px;

   --lh-hero: 1.3;
   --lh-heading: 1.2;
   --lh-body: 1.4;

  --letter-spacing-hero: 1%;
   --letter-spacing-heading: 0;
   --letter-spacing-body: 0;
   --letter-spacing-button: .02em;

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

  --space-xxs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 96px;
  --space-section: 100px;


  /* ========================================================
     CONTAINER
     ======================================================== */

  --container-width: 1240px;
  --container-padding: 24px;


  /* ========================================================
     GRID
     ======================================================== */

  --grid-columns: 12;
  --grid-gap: 32px;


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

   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 20px;

   --radius-button: var(--radius-sm);
   --radius-card: var(--radius-xl);
   --radius-image: var(--radius-xl);

   --radius-pill: 999px;

  /* ========================================================
     BUTTONS
     ======================================================== */

  --btn-height: 50px;
  --btn-padding-x: 32px;
  --btn-border: 1px;


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

--shadow-sm:
0 8px 20px rgba(0,0,0,.12);

--shadow-md:
0 15px 35px rgba(0,0,0,.18);

--shadow-lg:
0 20px 50px rgba(0,0,0,.25);


  /* ========================================================
     TRANSITIONS
     ======================================================== */

  --transition-fast: .2s ease;
  --transition: .3s ease;
  --transition-slow: .6s ease;


  /* ========================================================
     EASING
     ======================================================== */

  --ease-default: ease;
  --ease-smooth: cubic-bezier(.22,1,.36,1);

    /* ========================================================
   OPACITY
======================================================== */

   --opacity-disabled: .4;
   --opacity-muted: .7;
   --opacity-overlay: .9;


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

  --z-navbar: 100;
  --z-dropdown: 200;
  --z-overlay: 900;
  --z-modal: 1000;


  /* ========================================================
     BREAKPOINTS
     ======================================================== */

  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-laptop: 1120px;
  --bp-desktop: 1240px;


}