:root {
    /* COLORS */

    --color-background: #F3F2EE;
    --color-surface: #FFFFFF;

    --color-text-primary: #16201B;
    --color-text-secondary: #566059;

    --color-accent: #17784A;
    --color-accent-tint: #E3F2E9;
    --color-accent-text: #0F6A3F;

    --color-favorite: #E3A21A;

    --color-border-card: #E7E5DF;
    --color-border-input: #D5D3CC;
    --color-divider: #EFEDE8;

    --color-icon-bell-inactive: #7A847D;
    --color-tab-inactive: #6B746E;
    --color-chevron: #9AA39D;

    --color-line-badge-background: #16201B;
    --color-line-badge-text: #FFFFFF;


    /* TYPOGRAPHY */
    --font-family-base: "Figtree", -apple-system, "SF Pro Text", system-ui, sans-serif;

    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --font-size-base: 1rem;

    --font-size-screen-title: 2.125rem;
    --font-size-departure-minutes: 1.875rem;
    --font-size-line-number: 1.3125rem;
    --font-size-station-name: 1.1875rem;
    --font-size-destination: 1.0625rem;
    --font-size-search: 1.0625rem;
    --font-size-section-label: 0.9375rem;
    --font-size-walk-info: 0.875rem;
    --font-size-minute-unit: 0.875rem;
    --font-size-tab-label: 0.75rem;

    --line-height-screen-title: 2.5rem;
    --line-height-departure-minutes: 2rem;
    --line-height-station-name: 1.5rem;
    --line-height-destination: 1.375rem;

    --letter-spacing-screen-title: -0.02em;
    --letter-spacing-departure-minutes: -0.02em;
    --letter-spacing-station-name: -0.01em;
    --letter-spacing-section-label: 0.01em;


    /* SPACING SCALE */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;


    /* LAYOUT */
    --container-max: 75rem;

    --page-padding: 1.25rem;
    --page-padding-top: 3.5rem;
    --page-padding-bottom: 1rem;

    --title-margin-bottom: 1rem;
    --search-margin-bottom: 1.625rem;

    --section-label-margin-top: 0;
    --section-label-margin-right: 0;
    --section-label-margin-bottom: 0.75rem;
    --section-label-margin-left: 0.25rem;


    /* CARD */
    --card-padding-top: 0.875rem;
    --card-padding-right: 0.5rem;
    --card-padding-bottom: 0.5rem;
    --card-padding-left: 1rem;

    --card-gap: 0.875rem;
    --card-header-to-rows-gap: 0.5rem;

    --card-radius: 1.25rem;
    --card-border-width: 1px;

    --card-shadow: 0 2px 10px rgba(22, 32, 27, 0.06);


    /* SEARCH */
    --search-height: 3.625rem;
    --search-radius: 1.125rem;

    --search-padding-top: 0;
    --search-padding-right: 0.4375rem;
    --search-padding-bottom: 0;
    --search-padding-left: 1.125rem;

    --search-inner-gap: 0.625rem;

    --search-border-width: 1.5px;
    --search-shadow: 0 3px 12px rgba(22, 32, 27, 0.07);


    /* DEPARTURE ROW */
    --departure-row-min-height: 3.5rem;

    --departure-row-padding-block: 0.375rem;
    --departure-row-column-gap: 0.75rem;

    --minutes-column-width: 4.625rem;
    --minutes-unit-gap: 0.1875rem;

    --line-badge-width: 2.875rem;
    --line-badge-height: 2.875rem;
    --line-badge-radius: 0.875rem;


    /* WALKING INFORMATION */
    --walk-info-margin-top: 0.125rem;
    --walk-icon-text-gap: 0.375rem;


    /* BOTTOM NAVIGATION */
    --nav-padding-top: 0.375rem;
    --nav-padding-horizontal: 1rem;
    --nav-padding-bottom: 1.375rem;

    --nav-tab-height: 3.5rem;
    --nav-icon-label-gap: 0.1875rem;

    --nav-border-top-width: 1px;


    /* BORDER RADIUS */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;

    --radius-touch-button: 1.375rem;


    /* ICON SIZES */
    --icon-size-search: 1.375rem;
    --icon-size-location: 1.375rem;
    --icon-size-star: 1.5rem;
    --icon-size-bell: 1.3125rem;
    --icon-size-chevron: 1.25rem;
    --icon-size-walk: 0.9375rem;
    --icon-size-check: 0.875rem;
    --icon-size-navigation: 1.5rem;

    --icon-stroke-width: 2;


    /* ACCESSIBILITY / TOUCH TARGETS */
    --touch-target-size: 2.75rem;

    /* COMPONENT STATES */

    --color-bell-active-background: #E3F2E9;
    --color-bell-active-icon: #17784A;

    --color-favorite-inactive: #566059;
    --color-favorite-active: #E3A21A;

    --color-nav-active: #17784A;
    --color-nav-inactive: #6B746E;
    --color-nav-background: #FFFFFF;
}