/* ==========================================
   DESIGN TOKENS
   Central source of truth for the VINYLED
   design system. Every other CSS file should
   reference these variables instead of
   hard-coding raw values.
========================================== */

:root {

    /* ==========================================
       COLOUR SYSTEM
       Premium dark-blue / navy identity.
       Balanced with white and light-blue surfaces
       so the site never reads as fully dark.
    ========================================== */

    /* Core navy / blue palette */
    --color-navy-deep:      #050B18; /* deepest background, footer, dark sections */
    --color-navy:           #0B1730; /* primary dark surface */
    --color-blue:           #17356B; /* mid-tone brand blue */
    --color-blue-soft:      #4C7EC9; /* softer supporting blue */
    --color-blue-accent:    #3D8BFF; /* restrained bright accent - use sparingly */

    /* Light / neutral palette */
    --color-white:          #FFFFFF;
    --color-off-white:      #F5F8FC; /* light section background */
    --color-blue-light:     #E7EEF9; /* very light blue surface */

    /* Surfaces */
    --color-surface:        var(--color-navy);      /* default dark surface */
    --color-surface-light:  var(--color-off-white);  /* default light surface */
    --color-surface-elevated: #10203F;               /* raised panels on dark sections */

    /* Text */
    --color-text:           #0B1730; /* body text on light backgrounds */
    --color-text-inverse:   #F5F8FC; /* body text on dark backgrounds */
    --color-text-muted:     #5A6B85; /* secondary text on light backgrounds */
    --color-text-muted-inverse: #A7B4CC; /* secondary text on dark backgrounds */

    /* Borders */
    --color-border:         #DCE3EE; /* borders on light surfaces */
    --color-border-inverse: #223256; /* borders on dark surfaces */

    /* Feedback (used sparingly, only when genuinely needed later) */
    --color-success:        #2E9E6B;
    --color-error:          #D14343;


    /* ==========================================
       TYPOGRAPHY
       Premium, clean, automotive feel.
       Responsive sizing via clamp().
    ========================================== */

    --font-heading: "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Helvetica Neue", Arial, sans-serif;

    /* Fluid type scale - min/preferred/max */
    --text-h1: clamp(2.25rem, 1.6rem + 3vw, 4rem);
    --text-h2: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
    --text-h3: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
    --text-h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --text-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
    --text-small: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);

    --leading-tight:  1.15;
    --leading-heading: 1.25;
    --leading-body:   1.6;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-bold:     700;

    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide:  0.04em;


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

    --space-xs:  0.5rem;   /* 8px */
    --space-sm:  0.75rem;  /* 12px */
    --space-md:  1.25rem;  /* 20px */
    --space-lg:  2rem;     /* 32px */
    --space-xl:  3rem;     /* 48px */
    --space-2xl: 4.5rem;   /* 72px */
    --space-3xl: 7rem;     /* 112px */


    /* ==========================================
       LAYOUT / CONTAINER WIDTHS
    ========================================== */

    --container-width-desktop: 85%;
    --container-max-width: 1320px;

    --container-width-mobile: 92%;

    /* Section vertical rhythm */
    --section-padding-y: clamp(3rem, 2.4rem + 3vw, 6rem);

    /* Fixed bottom mobile nav - defined once here so both
       the component's own CSS and the body's safe-area
       spacing (in global.css) stay in sync. */
    --bottom-nav-height: 64px;


    /* ==========================================
       RADIUS SYSTEM
       Restrained - luxury automotive feel,
       not a "pill UI" system.
    ========================================== */

    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 20px;


    /* ==========================================
       SHADOW SYSTEM
       Subtle elevation only. Dark sections lean
       on borders/contrast instead of shadows.
    ========================================== */

    --shadow-sm: 0 1px 3px rgba(5, 11, 24, 0.08);
    --shadow-md: 0 8px 24px rgba(5, 11, 24, 0.12);
    --shadow-lg: 0 20px 48px rgba(5, 11, 24, 0.16);


    /* ==========================================
       MOTION FOUNDATION
       Global timing only - section-specific
       animation is built in later prompts.
    ========================================== */

    --transition-fast:   120ms ease;
    --transition-normal: 240ms ease;
    --transition-slow:   420ms ease;


    /* ==========================================
       SAFE AREA (mobile app-like foundation)
    ========================================== */

    --safe-area-top:    env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);


    /* ==========================================
       Z-INDEX SCALE
       Reserved now so future components
       (header, mobile nav) don't guess values.
    ========================================== */

    --z-header: 100;
    --z-mobile-nav: 200;
    --z-overlay: 300;
}