/* ========================================= */
/* AkbarBin UI Framework */
/* Version : 1.0.0 */
/* ========================================= */

:root {

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

  /* Brand */
  --color-primary: #2f855a;
  --color-primary-dark: #086b43;
  --color-primary-light: #83d8a6;
  --color-primary-tint: #e6fffa;

  /* Neutral */
  --color-white: #ffffff;
  --color-black: #000000;

  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  /* Semantic Text */
  --color-heading: var(--color-gray-900);
  --color-body: var(--color-gray-700);
  --color-muted: var(--color-gray-500);
  --color-link: var(--color-primary);

  /* Background */
  --color-bg: var(--color-white);
  --color-bg-secondary: var(--color-gray-50);
  --color-surface: var(--color-white);

  /* Border */
  --color-border: var(--color-gray-200);

  /* Feedback Tint */
  --color-success-tint: #f0fdf4;
  --color-warning-tint: #fffbeb;
  --color-danger-tint: #fef2f2;
  --color-info-tint: #eff6ff;

  /* Feedback */
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;
  --color-info: #2563eb;

  /* Focus */
  --focus-ring: 0 0 0 0.4rem rgba(47, 133, 90, 0.2);

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

  --font-family: "Plus Jakarta Sans", sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font Size */

  --fs-display: clamp(4.8rem, 7vw, 7.2rem);

  --fs-h1: clamp(3.8rem, 5vw, 5.6rem);
  --fs-h2: clamp(2.8rem, 4vw, 4.8rem);
  --fs-h3: clamp(2.4rem, 3vw, 3.2rem);
  --fs-h4: 2.4rem;
  --fs-h5: 2rem;
  --fs-h6: 1.8rem;

  --fs-xl: 2.4rem;
  --fs-lg: 2rem;
  --fs-md: 1.8rem;
  --fs-sm: 1.6rem;
  --fs-xs: 1.4rem;
  --fs-caption: 1.2rem;

  /* Line Height */

  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body: 1.7;

  /* Letter Spacing */

  --ls-tight: -0.05rem;
  --ls-normal: 0;
  --ls-wide: 0.05rem;

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

  --space-4: 0.4rem;
  --space-8: 0.8rem;
  --space-12: 1.2rem;
  --space-16: 1.6rem;
  --space-24: 2.4rem;
  --space-32: 3.2rem;
  --space-48: 4.8rem;
  --space-64: 6.4rem;
  --space-80: 8rem;
  --space-96: 9.6rem;
  --space-128: 12.8rem;

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

  --container-width: 120rem;
  --content-width: 72rem;

  --container-padding-desktop: 3.2rem;
  --container-padding-tablet: 2.4rem;
  --container-padding-mobile: 2rem;

  --grid-gap: 3.2rem;

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

  --radius-sm: 0.8rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.6rem;
  --radius-xl: 2.4rem;
  --radius-full: 999rem;
  --radius-circle: 50%;

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

  --border-width: 0.1rem;
  --border-style: solid;

  /* ========================================= */
  /* SHADOW */
  /* ========================================= */

  --shadow-sm: 0 0.4rem 1.2rem rgba(15, 23, 42, 0.05);

  --shadow-md: 0 1.2rem 3.2rem rgba(15, 23, 42, 0.08);

  --shadow-lg: 0 2.4rem 6.4rem rgba(15, 23, 42, 0.12);

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

  --opacity-disabled: 0.5;

  /* ========================================= */
  /* ANIMATION */
  /* ========================================= */

  --duration-fast: 0.2s;
  --duration-default: 0.3s;
  --duration-slow: 0.5s;

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

  --transition-fast: all var(--duration-fast) ease;
  --transition-default: all var(--duration-default) ease;
  --transition-slow: all var(--duration-slow) ease;

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

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-tooltip: 1100;
  --z-toast: 1200;

  /* ========================================= */
  /* HEADER */
  /* ========================================= */

  --header-height-desktop: 8rem;
  --header-height-mobile: 7.2rem;

  /* ========================================= */
  /* SECTION */
  /* ========================================= */

  --section-padding: 9.6rem;

  /* ========================================= */
  /* BUTTON */
  /* ========================================= */

  --btn-height: 5.2rem;
  --btn-padding-inline: 3.2rem;
  --btn-gap: 0.8rem;
  --btn-radius: 1.2rem;

  /* ========================================= */
  /* CARD */
  /* ========================================= */

  --card-padding: 3.2rem;
  --card-gap: 2.4rem;
  --card-radius: 1.6rem;

  /* ========================================= */
  /* FORM */
  /* ========================================= */

  --input-height: 5.2rem;
  --input-padding-inline: 1.6rem;
  --input-radius: var(--radius-md);

  /* ========================================= */
  /* ICON */
  /* ========================================= */

  --icon-xs: 1.2rem;
  --icon-sm: 1.6rem;
  --icon-md: 2rem;
  --icon-lg: 2.4rem;
  --icon-xl: 3.2rem;
  --icon-2xl: 6.4rem;

  /* ========================================= */
  /* BADGE */
  /* ========================================= */

  --badge-padding-y: 0.6rem;
  --badge-padding-x: 1.4rem;
}