/*==========================================================
FTN PLATFORM DESIGN TOKENS
Version 1.0
==========================================================*/

:root{

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

--ftn-red:#D71920;
--ftn-red-dark:#B51218;
--ftn-red-light:#F03A45;

--ftn-black:#050505;
--ftn-black-2:#0B0B0B;
--ftn-black-3:#111111;
--ftn-black-4:#1A1A1A;

--ftn-white:#FFFFFF;

--ftn-gray-50:#F8F9FA;
--ftn-gray-100:#EEEEEE;
--ftn-gray-200:#DDDDDD;
--ftn-gray-300:#CFCFCF;
--ftn-gray-400:#A5A5A5;
--ftn-gray-500:#7A7A7A;
--ftn-gray-600:#555555;
--ftn-gray-700:#333333;
--ftn-gray-800:#222222;
--ftn-gray-900:#161616;

--ftn-success:#27AE60;
--ftn-warning:#F2C94C;
--ftn-danger:#EB5757;
--ftn-info:#2F80ED;

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

--text-primary:#FFFFFF;
--text-secondary:#D4D4D4;
--text-muted:#9A9A9A;
--text-light:#777777;

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

--surface-1:#111111;
--surface-2:#171717;
--surface-3:#1F1F1F;
--surface-4:#252525;

--glass-light:rgba(255,255,255,.04);
--glass-medium:rgba(255,255,255,.08);

--border-light:rgba(255,255,255,.08);
--border-medium:rgba(255,255,255,.12);
--border-heavy:rgba(255,255,255,.18);

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

--shadow-xs:
0 1px 3px rgba(0,0,0,.25);

--shadow-sm:
0 3px 8px rgba(0,0,0,.30);

--shadow-md:
0 10px 24px rgba(0,0,0,.35);

--shadow-lg:
0 18px 40px rgba(0,0,0,.42);

--shadow-xl:
0 28px 72px rgba(0,0,0,.50);

--shadow-red:
0 10px 30px rgba(215,25,32,.22);

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

--radius-xs:6px;
--radius-sm:10px;
--radius-md:14px;
--radius-lg:18px;
--radius-xl:24px;
--radius-2xl:34px;
--radius-pill:999px;

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

--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-7:32px;
--space-8:40px;
--space-9:56px;
--space-10:72px;

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

--page-width:1400px;

--content-width:1200px;

--dashboard-width:1320px;

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

--font-heading:
Inter,
Segoe UI,
Arial,
sans-serif;

--font-body:
Inter,
Segoe UI,
Arial,
sans-serif;

--font-mono:
Consolas,
monospace;

--text-xs:.75rem;
--text-sm:.875rem;
--text-md:1rem;
--text-lg:1.125rem;
--text-xl:1.35rem;
--text-2xl:1.8rem;
--text-3xl:2.4rem;
--text-4xl:3rem;
--text-5xl:4rem;

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

--transition-fast:.18s ease;

--transition-normal:.28s ease;

--transition-slow:.45s ease;

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

--z-dropdown:100;
--z-header:200;
--z-modal:500;
--z-toast:800;

}