/* ==========================================================
   MARK SOLUTIONS DESIGN SYSTEM
   TOKENS
   Version: 1.0
   ========================================================== */

:root {

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

    --color-primary: #0D2760;
    --color-secondary: #639AAF;
    --color-accent: #7FB8CF;
    --color-text-accent: #4B7687;
    --color-focus-light: #4B7687;
    --color-dark: #132748;


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

    --color-white: #FFFFFF;

    --color-gray-050: #FCFDFF;
    --color-gray-100: #F8FAFC;
    --color-gray-150: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-250: #D6DEE8;
    --color-gray-300: #CBD5E1;
    --color-gray-350: #B0BCCD;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-900: #172B4D;

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

    --color-background: var(--color-white);

    --color-text: var(--color-gray-900);
    --color-text-light: var(--color-white);

    --color-border: var(--color-gray-200);


      /* ======================================================
      SURFACES
      ====================================================== */

   --color-background: var(--color-white);
   --color-background-alt: var(--color-gray-100);

   --color-surface: var(--color-white);

   --color-border: var(--color-gray-200);

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

    --font-family:
        "Roboto Flex",
        "Segoe UI",
        Arial,
        sans-serif;

    /* Font Size */

    --font-size-050: 0.75rem;     /* 12px */
    --font-size-100: 0.875rem;     /* 14 */
    --font-size-150: 0.9375rem;    /* 15 */
    --font-size-200: 1rem;         /* 16 */
    --font-size-250: 1.0625rem;    /* 17 */
    --font-size-300: 1.125rem;     /* 18 */
    --font-size-350: 1.1875rem;    /* 19 */
    --font-size-400: 1.25rem;      /* 20 */
    --font-size-450: 1.375rem;     /* 22 */
    --font-size-500: 1.5rem;       /* 24 */
    --font-size-525: 1.625rem;     /* 26 */
    --font-size-600: 2rem;         /* 32 */
    --font-size-625: 2.25rem;      /* 36 */
    --font-size-650: 2.5rem;       /* 40 */
    --font-size-675: 2.75rem;      /* 44 */
    --font-size-700: 3rem;         /* 48 */
    --font-size-725: 3.25rem;      /* 52 */
    --font-size-750: 3.5rem;       /* 56 */
    --font-size-800: 4rem;         /* 64 */
    --font-size-825: 4.25rem;      /* 68 */

    /* Font Weight */

    --font-weight-300: 300;
    --font-weight-350: 350;
    --font-weight-400: 400;
    --font-weight-450: 450;
    --font-weight-500: 500;
    --font-weight-550: 550;
    --font-weight-600: 600;
    --font-weight-650: 650;
    --font-weight-700: 700;

    /* Line Height */

    --line-height-tight: 1.05;
    --line-height-heading: 1.15;
    --line-height-body: 1.55;

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

    --space-050: 0.25rem;     /* 4 */
    --space-100: 0.5rem;      /* 8 */
    --space-150: 0.75rem;     /* 12 */
    --space-200: 1rem;        /* 16 */
    --space-250: 1.25rem;     /* 24 */
    --space-300: 1.5rem;      /* 24 */
    --space-400: 2rem;        /* 32 */
    --space-450: 2.5rem;      /* 40 */
    --space-500: 3rem;        /* 48 */
    --space-525: 3.375rem;    /* 54 */
    --space-550: 3.75rem;     /* 60 */
    --space-575: 4.125rem;    /* 66 */
    --space-600: 4.5rem;      /* 72 */
    --space-650: 4.75rem;     /* 76 */
    --space-700: 7rem;        /* 112 */

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

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* ======================================================
       ICONS
       ====================================================== */

    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;

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

    --border-width: 1px;

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

   --shadow-sm: 0 2px 10px rgba(0,0,0,.05);

   --shadow-md: 0 8px 24px rgba(0,0,0,.08);

   --shadow-lg: 0 20px 60px rgba(0,0,0,.12);

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

    --transition-fast: .15s;
    --transition-base: .25s;

    --ease:
        cubic-bezier(.4,0,.2,1);

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

    --z-base: 1;
    --z-header: 100;
    --z-dropdown: 200;
    --z-modal: 1000;


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

   --header-height: 64px;
   --logo-height: 36px;
   --header-offset: 14px;

   --hero-background: #132748;
   --header-background: rgb(from var(--hero-background) r g b / 76%);
   --footer-background: var(--hero-background);

   --hero-height: min(100svh, 1000px);


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

   --button-primary-background: var(--color-secondary);
   --button-primary-color: var(--color-white);

   --button-secondary-background: transparent;
   --button-secondary-color: var(--color-white);
   --button-secondary-border: var(--color-white);


   /* ======================================================
      SIGNAL DOTS
      ====================================================== */

   --signal-dot-size: 7px;
   --signal-dot-color: var(--color-secondary);
   --signal-dot-ring: rgb(from var(--color-secondary) r g b / 14%);
   --signal-dot-ring-size: 3px;
   --receiving-node-ring-size: 2px;
   --signal-dot-glow: rgb(from var(--color-secondary) r g b / 18%);
   --signal-dot-glow-size: 6px;
   --signal-dot-opacity: 0.85;
   --signal-dot-port-border: rgb(from var(--color-primary) r g b / 20%);
   --flow-line-width: 1px;
   --flow-line-color: rgb(from var(--color-secondary) r g b / 24%);


   /* ======================================================
      HERO AMBIENT DOTS
      ====================================================== */

   --hero-dot-ring: rgb(from var(--color-accent) r g b / 30%);
   --hero-dot-glow: rgb(from var(--color-accent) r g b / 14%);

}





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

/*

Mobile:
0–767px

Tablet:
768–1023px

Desktop:
1024–1439px

Wide:
1440px+

*/