@charset "UTF-8";

/*
 * PharmaLab — canonical design tokens.
 *
 * Single source of truth for the brand palette and the shared scale. The layout
 * system, type scale, radii, shadows and motion are identical to the SP Micro
 * Market design system; only the colour roles changed (reference dark blue
 * surfaces -> dark teal, reference warm accent -> mint). Every component sheet
 * reads these values through var().
 *
 * Mapping from the reference system:
 *   reference dark 950/900/850/800/700    ->  pharma-950/900/850/800/700
 *   reference accent 600/500/400/300/100  ->  mint-700/500/400/300/100
 */

:root {
    /* ---------------------------------- Dark surfaces */
    --pharma-950: #001514;
    --pharma-900: #001B19;
    --pharma-850: #00211E;
    --pharma-800: #002E28;
    --pharma-700: #083A34;
    --pharma-black: #000A09;   /* shadow ink */

    /* ---------------------------------- Brand accents */
    --mint-700: #116D5C;
    --mint-600: #238E78;
    --mint-500: #32AC91;
    --mint-400: #58D4B8;
    --mint-300: #9AEAD2;
    --mint-150: #CFF3E9;
    --mint-100: #E7FFF8;

    /* ---------------------------------- Text and UI */
    --white: #F7F9F7;
    --off-white: #F1FAF7;
    --text-primary-dark: #F7F9F7;
    --text-secondary-dark: #B7CDC8;
    --text-tertiary-dark: #7E9E97;
    --text-soft-dark: #DCEDE8;         /* secondary copy that must stay bright (sub-menus, notices) */
    --text-primary-light: #062B27;
    --text-secondary-light: #466861;
    --border-dark: #14584D;
    --border-light: #D3E6E0;
    --border-mint: rgba(50, 172, 145, 0.42);
    --border-mint-soft: rgba(50, 172, 145, 0.24);
    --focus: #9AEAD2;

    /* ---------------------------------- Semantic */
    --success: #116D5C;
    --warning: #116D5C;                /* no amber in the brand palette; notices carry a label */
    --error: #D45454;
    --error-300: #E58080;              /* error text on dark surfaces (AA) */
    --info: #32AC91;

    /* ---------------------------------- Gradients and glows */
    --gradient-mint: linear-gradient(135deg, #9AEAD2 0%, #32AC91 52%, #116D5C 100%);
    --gradient-mint-text: linear-gradient(96deg, #9AEAD2 0%, #32AC91 52%, #58D4B8 100%);
    --glow-mint-soft: rgba(50, 172, 145, 0.10);
    --glow-mint: rgba(50, 172, 145, 0.18);
    --glow-mint-cta: 0 10px 34px -12px rgba(50, 172, 145, 0.55);

    /* ---------------------------------- Typography */
    --font-sans: "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --font-display: var(--font-sans);

    --text-display-xl: clamp(2.5rem, 4.4vw, 4.25rem);
    --text-display: clamp(2.25rem, 4vw, 3.5rem);
    --text-h1: clamp(2rem, 3.8vw, 3.25rem);
    --text-h2: clamp(1.875rem, 3.4vw, 3rem);
    --text-h3: clamp(1.65rem, 2vw, 2.25rem);
    --text-body-lg: 1.1875rem;   /* 19px */
    --text-body: 1.0625rem;      /* 17px */
    --text-ui: 0.875rem;         /* 14px */
    --text-caption: 0.8125rem;   /* 13px */

    --leading-display: 1.04;
    --leading-h1: 1.08;
    --leading-h2: 1.08;
    --leading-h3: 1.15;
    --leading-body: 1.65;

    /* ---------------------------------- Layout */
    --container: 1352px;
    --container-wide: 1536px;
    --container-reading: 940px;
    --gutter-desktop: 64px;
    --gutter-laptop: 44px;
    --gutter-tablet: 28px;
    --gutter-mobile: 20px;
    --shell: min(var(--container), 100% - (var(--gutter-desktop) * 2));
    --shell-wide: min(var(--container-wide), 100% - (var(--gutter-desktop) * 2));

    /* ---------------------------------- Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
    --space-40: 160px;

    --section-y: clamp(112px, 11vw, 160px);
    --section-y-mobile: clamp(72px, 9vw, 96px);

    /* ---------------------------------- Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ---------------------------------- Shadows (soft, wide, low opacity) */
    --shadow-card-dark: 0 26px 70px -34px rgba(0, 10, 9, 0.9);
    --shadow-card-dark-lift: 0 34px 80px -34px rgba(0, 10, 9, 0.95);
    --shadow-card-light: 0 20px 55px rgba(6, 43, 39, 0.10);
    --shadow-card-light-lift: 0 30px 70px rgba(6, 43, 39, 0.16);
    --shadow-machine: 0 40px 70px -30px rgba(0, 10, 9, 0.65);
    --glow-green: 0 0 90px 0 rgba(50, 172, 145, 0.14);

    /* ---------------------------------- Motion */
    --dur-fast: 170ms;
    --dur-normal: 280ms;
    --dur-slow: 600ms;
    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);

    /* ---------------------------------- Icons */
    --icon-stroke: 1.85;
}

@media (max-width: 1279px) {
    :root {
        --shell: min(var(--container), 100% - (var(--gutter-laptop) * 2));
        --shell-wide: min(var(--container-wide), 100% - (var(--gutter-laptop) * 2));
    }
}

@media (max-width: 1023px) {
    :root {
        --shell: min(var(--container), 100% - (var(--gutter-tablet) * 2));
        --shell-wide: min(var(--container-wide), 100% - (var(--gutter-tablet) * 2));
    }
}

@media (max-width: 639px) {
    :root {
        --shell: min(var(--container), 100% - (var(--gutter-mobile) * 2));
        --shell-wide: min(var(--container-wide), 100% - (var(--gutter-mobile) * 2));
        --section-y: var(--section-y-mobile);
    }
}