/* ==========================================================
   FINTECHOISIS | GPIR
   Design System Variables
   Version : 1.0
========================================================== */

:root{

    /* ======================================================
       BRAND COLOURS
    ====================================================== */

    --color-primary: #B8863B;        /* Royal Gold */
    --color-secondary: #8B4D6D;      /* Editorial Magenta */

    --color-dark: #1B1D21;           /* Graphite */
    --color-dark-2: #2A2E35;

    --color-light: #F7F4EF;          /* Warm Ivory */
    --color-grey: #5E636E;
    --color-grey-light: #A5ABB3;

    --color-white: #FFFFFF;
    --color-black: #000000;

    --color-success: #3FA76C;
    --color-warning: #D4A017;
    --color-danger: #D9534F;


    
    /* ======================================================
       BACKGROUNDS
    ====================================================== */

    --bg-page: #101215;

    --bg-section: #171A20;

    --bg-card: rgba(255,255,255,0.05);

    --bg-card-hover: rgba(255,255,255,0.08);

    --bg-glass: rgba(255,255,255,0.07);

   


    /* ======================================================
       LIGHT-THEME PILOT (hero)
       Executive Navy / Gold per Master-Library brand spec
    ====================================================== */

    --hero-light-bg: #FEFCF9;
    --hero-navy: #0F2747;
    --hero-gold: #C8A24A;
    --hero-light-body: #4B5563;
    --hero-light-border: rgba(15,39,71,.12);
    --hero-light-card: #FFFFFF;

    /* ======================================================
       TEXT
    ====================================================== */

    --text-heading: #FFFFFF;

    --text-body: #E6E6E6;

    --text-muted: #B8BDC5;

    --text-dark: #2C2C2C;


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

    --border-light: rgba(255,255,255,.08);

    --border-medium: rgba(255,255,255,.15);

    --border-gold: #B8863B;

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

    --shadow-soft:
        0 8px 24px rgba(0,0,0,.12);

    --shadow-card:
        0 16px 40px rgba(0,0,0,.18);

    --shadow-hover:
        0 20px 50px rgba(0,0,0,.28);

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

--font-primary: 'Inter', sans-serif;
--font-editorial: 'Playfair Display', serif;

/* Letter Spacing */

--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.08em;

/* ======================================================
   SHARED TYPE SCALE
   Use these for section headers, card headings and body
   copy across every section instead of one-off per-section
   font-sizes, so heading/subheading/body sizes read the
   same everywhere on the site.
====================================================== */

--fs-section-kicker: 0.8rem;               /* 13px  — small pill/tag labels */
--fs-section-heading: clamp(1.85rem, 1.1vw + 1.45rem, 2.5rem); /* ~30-40px — every "#section h2" */
--fs-section-intro: 1.05rem;               /* 17px  — intro paragraph under a section h2 */
--fs-card-heading: 1.25rem;                /* 20px  — card h3/h4 */
--fs-subheading: 1.6rem;                   /* 25.6px — column lead statement (e.g. founder message) */
--fs-body: 1rem;                           /* 16px  — default paragraph */
--fs-body-sm: 0.9375rem;                   /* 15px  — card/list body copy */
--fs-small: 0.875rem;                      /* 14px  — meta/caption text */

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

    --space-xxs: 4px;

    --space-xs: 8px;

    --space-sm: 16px;

    --space-md: 24px;

    --space-lg: 40px;

    --space-xl: 64px;

    --space-2xl: 96px;

    --space-3xl: 120px;


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

   --container-padding: 24px;


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

    --header-height: 84px;


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

    --z-header: 1000;

    --z-menu: 1100;

    --z-overlay: 1200;

    --z-modal: 2000;


/* ======================================================
       BLUR
====================================================== */

    --glass-blur: blur(18px);


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

--container-width: 1400px;

--section-spacing: 110px;

--card-radius: 18px;

--button-radius: 12px;

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

--shadow-sm: 0 8px 18px rgba(0,0,0,.08);

--shadow-md: 0 14px 30px rgba(0,0,0,.12);

--shadow-lg: 0 22px 50px rgba(0,0,0,.16);

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

--radius-sm:12px;

--radius-md:20px;

--radius-lg:24px;

--radius-pill:999px;



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

--transition-fast: .25s ease;

--transition-normal:.30s ease;

--transition-slow: .5s ease;

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

--section-desktop:110px;

--section-tablet:90px;

--section-mobile:75px;


/* ==========================================================
   ALIASES & MISSING TOKENS
   (referenced across the codebase under shorthand names —
   defined here so every consumer resolves to a real value)
========================================================== */

--transition: var(--transition-normal);

--primary: var(--color-primary);

--border: var(--border-light);
--color-border: var(--border-light);

--surface: var(--bg-section);
--bg-surface: var(--bg-section);
--color-surface: var(--bg-section);
--color-surface-alt: var(--bg-card);
--glass-bg: var(--bg-glass);

--color-heading: var(--text-heading);
--color-text: var(--text-body);

--radius-xl: 32px;
--shadow-xl: 0 30px 70px rgba(0,0,0,.24);

--space-xxl: 140px;

--icon-lg: 56px;

--gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));

--font-heading: var(--font-editorial);


/* ==========================================================
   RICH GRADIENT SURFACES
   A warmer, less flat-black alternative to solid --bg-page /
   --color-dark for hero-weight sections — blends the brand
   gold and magenta into the graphite base so dark sections
   read as premium rather than heavy.
========================================================== */

--gradient-rich-dark:
    linear-gradient(
        135deg,
        #0C1220 0%,
        #16182C 28%,
        #241B36 52%,
        #2E1F33 72%,
        #1A1512 100%
    );

--gradient-rich-dark-radial:
    radial-gradient(circle at 15% 15%, rgba(184,134,59,.16), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(139,77,109,.20), transparent 50%),
    radial-gradient(circle at 60% 90%, rgba(184,134,59,.10), transparent 55%);

}