/* ==========================================================================
   VLab-4000 — Design Tokens (from Graphic Manual)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600;700&family=Montserrat:wght@600;700;800&display=swap');

:root {
    /* -----------------------------------------------------------------------
       Brand Colors
    ----------------------------------------------------------------------- */
    --color-arterial-red:  #D90429;
    --color-medical-blue:  #2B2D42;
    --color-clean-slate:   #EDF2F4;
    --color-focus-orange:  #FB8500;

    /* -----------------------------------------------------------------------
       Semantic Colors
    ----------------------------------------------------------------------- */
    --color-primary:       #2B2D42;
    --color-primary-light: #3D3F56;
    --color-primary-dark:  #1A1B2E;

    --color-accent:        #D90429;
    --color-accent-light:  #E63950;
    --color-accent-subtle: rgba(217, 4, 41, 0.08);

    --color-cta:           #FB8500;
    --color-cta-hover:     #E07600;
    --color-cta-subtle:    rgba(251, 133, 0, 0.1);

    --color-text:          #2B2D42;
    --color-text-light:    #555770;
    --color-text-muted:    #8D8FA3;

    --color-bg:            #FFFFFF;
    --color-bg-alt:        #EDF2F4;
    --color-border:        #D5D8DC;
    --color-border-light:  #EAEDF0;

    /* Ink scale */
    --ink-900:  #2B2D42;
    --ink-700:  #3D3F56;
    --ink-500:  #555770;
    --ink-300:  #8D8FA3;
    --line-200: #D5D8DC;
    --white:    #FFFFFF;

    /* Status Colors */
    --color-success:        #1F8A5C;
    --color-success-subtle: rgba(31, 138, 92, 0.1);
    --color-warning:        #B7791F;
    --color-warning-subtle: rgba(183, 121, 31, 0.1);
    --color-error:          #D90429;
    --color-error-subtle:   rgba(217, 4, 41, 0.08);
    --color-info:           #2B7AB8;
    --color-info-subtle:    rgba(43, 122, 184, 0.1);

    /* -----------------------------------------------------------------------
       Typography
    ----------------------------------------------------------------------- */
    --font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', 'Courier New', monospace;

    /* Fluid type scale */
    --text-hero:   clamp(2.5rem, 5vw, 4rem);
    --text-h1:     clamp(2rem, 4vw, 3rem);
    --text-h2:     clamp(1.5rem, 3vw, 2.25rem);
    --text-h3:     clamp(1.25rem, 2vw, 1.5rem);
    --text-h4:     1.25rem;
    --text-h5:     1.125rem;
    --text-body:   1rem;
    --text-large:  1.125rem;
    --text-small:  0.875rem;
    --text-micro:  0.75rem;

    /* Line heights */
    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.6;
    --leading-loose:  1.75;

    /* Font weights */
    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-extrabold: 800;

    /* -----------------------------------------------------------------------
       Spacing (8px base grid)
    ----------------------------------------------------------------------- */
    --space-2:   0.125rem;   /*  2px */
    --space-4:   0.25rem;    /*  4px */
    --space-8:   0.5rem;     /*  8px */
    --space-12:  0.75rem;    /* 12px */
    --space-16:  1rem;       /* 16px */
    --space-20:  1.25rem;    /* 20px */
    --space-24:  1.5rem;     /* 24px */
    --space-32:  2rem;       /* 32px */
    --space-40:  2.5rem;     /* 40px */
    --space-48:  3rem;       /* 48px */
    --space-56:  3.5rem;     /* 56px */
    --space-64:  4rem;       /* 64px */
    --space-80:  5rem;       /* 80px */
    --space-96:  6rem;       /* 96px */
    --space-128: 8rem;       /* 128px */

    /* -----------------------------------------------------------------------
       Border Radius
    ----------------------------------------------------------------------- */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-pill: 100px;
    --radius-full: 9999px;

    /* -----------------------------------------------------------------------
       Shadows
    ----------------------------------------------------------------------- */
    --shadow-subtle:   0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-card:     0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-modal:    0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-inset:    inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* -----------------------------------------------------------------------
       Z-index Scale
    ----------------------------------------------------------------------- */
    --z-base:          0;
    --z-raised:        10;
    --z-sticky:        50;
    --z-header:        100;
    --z-dropdown:      200;
    --z-overlay:       300;
    --z-modal:         350;
    --z-cookie-banner: 400;
    --z-toast:         500;

    /* -----------------------------------------------------------------------
       Transitions
    ----------------------------------------------------------------------- */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;
    --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* -----------------------------------------------------------------------
       Layout
    ----------------------------------------------------------------------- */
    --container-max:    1200px;
    --container-narrow: 800px;
    --container-wide:   1440px;
    --grid-gap:         24px;
    --grid-gap-sm:      16px;
    --section-padding:  var(--space-96);

    /* -----------------------------------------------------------------------
       Border
    ----------------------------------------------------------------------- */
    --border-width:  1px;
    --border-style:  solid;
    --border-color:  var(--color-border);
    --border:        var(--border-width) var(--border-style) var(--border-color);
}