/* ============================================================
   Boston Scientific Design System — Tokens
   Source: https://ads.bsci.com (Color & Typography foundations)
   ============================================================ */

:root {
    /* ---------- Brand ----------
       brand-primary is reserved for the Boston Scientific logo only.
       Do NOT use for interactive elements or general UI.
    */
    --brand-primary: #003c71;

    /* ---------- Neutrals ---------- */
    --neutral-00: #000000;
    --neutral-20: #333333;
    --neutral-40: #666666;
    --neutral-60: #999999;
    --neutral-80: #cccccc;
    --neutral-95: #f2f2f2;
    --neutral-100: #ffffff;

    /* ---------- Action primary (buttons, links, hover states) ---------- */
    --action-primary-10: #001433;
    --action-primary-20: #012965;
    --action-primary-40: #0153cc;
    --action-primary-60: #3485fe;
    --action-primary-80: #9ac2fe;
    --action-primary-95: #e6f0ff;
    --action-primary-97: #f2f7ff;

    /* ---------- Accent primary (purple) ---------- */
    --accent-primary-20: #440066;
    --accent-primary-30: #660099;
    --accent-primary-40: #8800cc;
    --accent-primary-60: #bb33ff;
    --accent-primary-80: #dd99ff;
    --accent-primary-95: #f7e6ff;

    /* ---------- Accent secondary (cyan) ---------- */
    --accent-secondary-20: #005f66;
    --accent-secondary-40: #00becc;
    --accent-secondary-60: #00eeff;
    --accent-secondary-80: #99f8ff;
    --accent-secondary-95: #e6fdff;

    /* ---------- Feedback: error ---------- */
    --feedback-error-20: #590d11;
    --feedback-error-40: #b31921;
    --feedback-error-60: #e64d54;
    --feedback-error-80: #f2a6aa;
    --feedback-error-95: #fce9ea;

    /* ---------- Semantic aliases (UI layer) ---------- */
    --color-bg: var(--neutral-100);
    --color-bg-subtle: var(--neutral-95);
    --color-text: var(--neutral-20);
    --color-text-subtle: var(--neutral-40);
    --color-text-ghost: var(--neutral-100);
    --color-border: var(--neutral-80);
    --color-border-subtle: var(--neutral-95);
    --color-link: var(--action-primary-40);
    --color-link-hover: var(--action-primary-20);
    --color-focus-ring: var(--action-primary-60);

    /* Interactive (primary) — used for main CTAs, active nav, focus */
    --color-interactive: var(--action-primary-40);
    --color-interactive-hover: var(--action-primary-20);
    --color-interactive-active: var(--action-primary-10);
    --color-interactive-tint: var(--action-primary-95);

    /* RGB forms for rgba() overlays (tint backgrounds, shadows) */
    --color-interactive-rgb: 1, 83, 204;

    /* ---------- Gradients ---------- */
    --gradient-brand: linear-gradient(90deg, var(--brand-primary), var(--accent-primary-60), var(--accent-secondary-60));
    --gradient-primary: linear-gradient(90deg, var(--accent-secondary-60), var(--action-primary-40));
    --gradient-secondary: linear-gradient(90deg, var(--accent-primary-60), var(--action-primary-20));
    --gradient-accent: linear-gradient(90deg, var(--action-primary-60), var(--accent-primary-60));
    --gradient-subtle: linear-gradient(322deg, var(--neutral-100), var(--neutral-95));
    --gradient-assertive: linear-gradient(36deg, var(--neutral-00), var(--action-primary-20));
    --gradient-accent-border: linear-gradient(270deg, var(--action-primary-60), var(--accent-primary-60));

    /* ---------- Shadows ---------- */
    --shadow-primary: 0 0 0.75rem 0 rgba(0, 0, 0, 0.2);
    --shadow-secondary: 0 0.125rem 1rem 0 rgba(0, 0, 0, 0.1);
    --shadow-tertiary: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.2);

    /* ============================================================
       Typography
       ------------------------------------------------------------
       Brand typeface: SST (Monotype, proprietary).
       Request files at globalbranding@bsci.com.
       Fallback: Inter (humanist sans-serif) then system stack.
       ============================================================ */

    --font-family-sans:
        "SST", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ---------- Type scale (base-8, modular ratio ~1.25) ----------
       Root font-size = 16px (1rem). Never override to 62.5%.
       Values are starting points; refine with official Sketch lib.
    */
    --fs-display: 3rem;         /* 48px — use once per page, short lines */
    --fs-h1: 2.5rem;            /* 40px */
    --fs-h2: 2rem;              /* 32px */
    --fs-h3: 1.5rem;            /* 24px */
    --fs-h4: 1.25rem;           /* 20px */
    --fs-h5: 1.125rem;          /* 18px */
    --fs-h6: 1rem;              /* 16px */
    --fs-body-assertive: 1.125rem; /* 18px */
    --fs-body: 1rem;            /* 16px — body default */
    --fs-body-subtle: 0.875rem; /* 14px */
    --fs-small: 0.75rem;        /* 12px */

    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    /* ---------- Spacing (base-8) ---------- */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */

    /* ---------- Radii ---------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
}

/* Responsive type scale — shrink on narrow viewports */
@media (max-width: 768px) {
    :root {
        --fs-display: 2.25rem;
        --fs-h1: 2rem;
        --fs-h2: 1.625rem;
        --fs-h3: 1.25rem;
        --fs-h4: 1.125rem;
    }
}