/**
 * Design system tokens – CSS variables used by components.
 * Colors and typography from design palette / typography guide.
 */
:root {
    /* PRIMARY COLORS */
    --ds-color-primary: #0066b3;           /* Blue */
    --ds-color-primary-hover: #2c99ec;
    --ds-color-primary-active: #004578;
    --ds-color-primary-hover-text: #ffffff;
    --ds-color-primary-shadow: 0 0 4px 0 rgba(0, 102, 179, 0.5);  /* #0066B380 */
    --ds-color-primary-focus-ring: rgba(0, 102, 179, 0.4);

    --ds-color-secondary-hover-bg: #d6e7f3;
    --ds-color-secondary-active-bg: #0066b3;
    --ds-color-red: #ed1c24;
    --ds-color-grey-light: #9a989a;
    --ds-color-black: #231f20;

    /* SECONDARY COLORS (FIRST programs) */
    --ds-color-green: #00a651;
    --ds-color-orange: #f57e25;
    --ds-color-blue-light: #009cd7;
    --ds-color-purple: #662d91;

    /* NEUTRAL COLORS */
    --ds-color-neutral-dark: #404041;
    --ds-color-neutral-medium: #67686a;
    --ds-color-neutral-light: #ebebeb;

    /* PRIMARY TYPOGRAPHY – Roboto */
    --ds-font-family: Roboto, sans-serif;
    --ds-font-weight-regular: 400;
    --ds-font-weight-medium: 500;
    --ds-font-weight-semibold: 600;
    --ds-font-weight-bold: 700;

    /* Type scale – H1 36px, H2 28px, H3 22px, H4 14px, Body/List 14px */
    --ds-text-h1-size: 36px;
    --ds-text-h1-line: 1;           /* 100% */
    --ds-text-h2-size: 28px;
    --ds-text-h2-line: 32px;
    --ds-text-h3-size: 22px;
    --ds-text-h3-line: 20px;
    --ds-text-h4-size: 14px;
    --ds-text-h4-line: 20px;
    --ds-text-body-size: 14px;
    --ds-text-body-line: 24px;
    --ds-text-list-size: 14px;
    --ds-text-list-line: 24px;

    /* Primary button */
    --ds-btn-width: 250px;
    --ds-btn-height: 44px;
    --ds-btn-padding-y: 12px;
    --ds-btn-padding-x: 16px;
    --ds-btn-font-size: 14px;
    --ds-btn-line-height: 24px;
    --ds-btn-letter-spacing: -0.01em;   /* -1% */
    --ds-btn-gap: 12px;
    --ds-btn-border-width: 0;
    --ds-btn-radius: 8px;

    /* Secondary button */
    --ds-btn-secondary-border-width: 1px;
    --ds-btn-secondary-line-height: 20px;

    /* Tertiary button */
    --ds-btn-tertiary-gap: 4px;

    /* Link-style button */
    --ds-btn-link-font-size: 16px;
    --ds-btn-link-line-height: 20px;

    /* Close button */
    --ds-btn-close-size: 24px;
    --ds-btn-close-radius: 4px;

    /* Checkbox */
    --ds-checkbox-size: 16px;
    --ds-checkbox-gap: 8px;
    --ds-checkbox-border: 1px solid #0066b3;
    --ds-spacing-4: 16px;

    /* Program badges */
    --ds-badge-height: 24px;
    --ds-badge-radius: 12px;
    --ds-badge-padding-y: 2px;
    --ds-badge-padding-x: 12px;
    /* FTC*/
    --ds-badge-ftc-width: 159px;
    --ds-badge-ftc-bg: #FFE8D7;
    --ds-badge-ftc-text: #F57E25;
    /* FLL Explore */
    --ds-badge-fll-explore-width: 200px;
    --ds-badge-fll-explore-bg: #DEFFEE;
    --ds-badge-fll-explore-text: #00A651;
    /* FLL Challenge */
    --ds-badge-fll-challenge-width: 215px;
    --ds-badge-fll-challenge-bg: #FFE0E1;
    --ds-badge-fll-challenge-text: #ED1C24;
    /* FRC */
    --ds-badge-frc-width: 198px;
    --ds-badge-frc-bg: #C5EFFF;
    --ds-badge-frc-text: #009CD7;
}