/* =========================================================
   SBS ENGINEERING CONSULTANCY
   DESIGN SYSTEM / VARIABLES
   ========================================================= */

:root {

  /* -------------------------------------------------------
     BRAND COLORS
     ------------------------------------------------------- */

  --primary-color: #0b1f36;
  --primary-dark: #071522;
  --primary-light: #163a5e;

  --secondary-color: #d4a64a;
  --secondary-dark: #a77c25;
  --secondary-light: #e6c77b;

  --white: #ffffff;
  --black: #111111;

  /* -------------------------------------------------------
     TEXT
     ------------------------------------------------------- */

  --text-color: #2c3540;
  --text-light: #697580;
  --text-muted: #929ba3;
  --text-white-muted: rgba(255, 255, 255, 0.68);

  /* -------------------------------------------------------
     SURFACES
     ------------------------------------------------------- */

  --background: #f7f8fa;
  --surface: #ffffff;
  --surface-soft: #fbfcfd;
  --surface-dark: #101f30;

  --border-color: #e5e7eb;
  --border-soft: rgba(11, 31, 54, 0.08);

  /* -------------------------------------------------------
     STATUS
     ------------------------------------------------------- */

  --success: #198754;
  --danger: #b42318;
  --warning: #d4a64a;

  /* -------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------- */

  --font-heading: "Manrope", sans-serif;
  --font-body: "Inter", sans-serif;

  --fs-hero: 64px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body: 16px;

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

  /* -------------------------------------------------------
     SPACING
     ------------------------------------------------------- */

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-xxl: 96px;

  /* -------------------------------------------------------
     RADIUS
     ------------------------------------------------------- */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-round: 999px;

  /* -------------------------------------------------------
     SHADOWS
     ------------------------------------------------------- */

  --shadow-xs:
    0 2px 8px rgba(11, 31, 54, 0.05);

  --shadow-sm:
    0 6px 20px rgba(11, 31, 54, 0.07);

  --shadow-md:
    0 14px 35px rgba(11, 31, 54, 0.11);

  --shadow-lg:
    0 25px 60px rgba(11, 31, 54, 0.15);

  --shadow-xl:
    0 35px 90px rgba(11, 31, 54, 0.20);

  /* -------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------- */

  --transition-fast: 0.2s ease;
  --transition: 0.35s ease;
  --transition-slow: 0.6s ease;

  --transition-smooth:
    0.35s cubic-bezier(0.2, 0.7, 0.2, 1);

  /* -------------------------------------------------------
     LAYOUT
     ------------------------------------------------------- */

  --container-width: 1280px;

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

  --z-header: 50;
  --z-scroll: 90;
  --z-ai: 95;
  --z-modal: 100;
}