/** * Yesim brand tokens — Coverage Map. * Source: ~/Desktop/full-visual-site-export/src/styles/colors.scss + globals.scss (read-only). * Light: :root. Dark: [data-theme='dark'] on . * Map geo fills (--covered, --yellow, --ocean) unchanged in both themes. */ :root { /* ── Primitives (shared light/dark alphas — export :root) ── */ --white100: #ffffff0a; --white200: #ffffff0f; --white300: #ffffff14; --white320: #ffffff1a; --white340: #ffffff1f; --white400: #ffffff24; --white500: #ffffff42; --white600: #ffffff75; --white700: #ffffff99; --white800: #ffffffbd; --white900: #ffffffe0; --white1000: #ffffff; --black1000: #0b0b0e; --black900: #0c0c0de0; --black800: #0c0c0dbd; --black700: #0c0c0d99; --black600: #0c0c0d75; --black500: #0c0c0d42; --black350: #0c0c0d1f; --black300: #0c0c0d14; --black200: #0000000f; --black100: #0000000a; --black900Hard: #24262e; --black800Hard: #31333f; --black700Hard: #3b3d49; --gray50: #907f6f0a; --gray100: #907f6f0f; --gray200: #907f6f14; --gray300: #907f6f1a; --gray400: #907f6f1f; --gray500: #907f6f26; --gray1000: #f6f5f4; --orange100: #ff7a0014; --orange200: #ff7a001f; --orange300: #ff7a0029; --orange400: #ff7a0042; --orange1000: #ff7a00; --orange1100: #ff7300; --orange1200: #ff6a00; --orange100Hard: #fff4eb; --red100: #ff382e14; --red1000: #ff382e; --green1000: #34c759; --blue100: #0d99ff14; --blue200: #0d99ff33; --blue300: #0d99ff4d; --blue400: #0d99ff66; --blue1000: #0d99ff; --blue1100: #0091fa; --blue1200: #0085e5; --yellow1000: #ffcc00; --yellow1100: #ffae00; --yellow1200: #ffa100; --yellow200: #ffcc0033; --fillCheckboxDefault: var(--black200); --fillCheckboxDefaultHover: var(--black300); --fillCheckboxDefaultPressed: var(--black350); --fillCheckboxActive: var(--yellow1000); --fillCheckboxActiveHover: var(--yellow1100); --fillCheckboxActivePress: var(--yellow1200); --fillRadiobuttonDefault: var(--black200); --fillRadiobuttonDefaultHover: var(--black300); --fillRadiobuttonDefaultPressed: var(--black350); --fillRadiobuttonActive: var(--orange1000); --fillRadiobuttonActiveHover: var(--orange1100); --fillRadiobuttonActivePress: var(--orange1200); --checkbox-size: 24px; --checkbox-radius: 6px; --trTransparent: #ffffff00; /* ── Surfaces ── */ --backgroundGrayToBlack1: var(--gray1000); --backgroundGrayToBlack2: var(--gray1000); --backgroundGrayToBlack3: var(--gray1000); --backgroundWhiteToBlack1: var(--white1000); --backgroundWhiteToBlack2: var(--white1000); --backgroundWhiteToBlack3: var(--white1000); /* ── Text ── */ --textMain: var(--black1000); --textSecondary: var(--black800); --textTetriary: var(--black600); --textQuaternary: var(--black500); --textWhiteMain: var(--white1000); --textWhiteSecondary: #ffffff99; --textWhiteTetriary: #ffffff75; --textAccent: var(--orange1000); --textError: var(--red1000); --textSuccess: var(--green1000); /* ── Icons ── */ --iconMain: var(--black900); --iconSecondary: var(--black700); --iconTetriary: var(--black600); --iconQuaternary: #907f6f33; --iconWhiteMain: var(--white1000); --iconWhiteSecondary: var(--white700); --iconWhiteTetriary: var(--white600); /* ── Borders ── */ --borderMain: var(--black100); --borderSecondary: var(--black200); --borderTetriary: var(--black350); --borderActive: var(--orange1000); --borderTransparent: var(--trTransparent); /* ── Input ── */ --inputFillDefault: var(--gray300); --inputFillHover: var(--gray400); --inputFillActive: var(--gray500); --inputTextDefault: var(--textTetriary); --inputTextInput: var(--textMain); --inputTextPlaceholder: var(--textQuaternary); --inputIconDefault: var(--iconTetriary); --inputIconHover: var(--iconTetriary); --inputBorderTabSelection: var(--borderActive); /* ── Buttons ── */ --buttonPrimaryFillDefault: var(--black1000); --buttonPrimaryFillHover: var(--black800Hard); --buttonPrimaryFillPress: var(--black700Hard); --buttonPrimaryTextDefault: var(--white1000); --buttonPrimaryTextHover: var(--white1000); --buttonPrimaryTextPress: var(--white1000); --buttonSecondaryFillDefault: var(--gray300); --buttonSecondaryTextDefault: var(--textSecondary); --buttonLightFillDefault: var(--white1000); --buttonLightFillHover: var(--white900); --buttonLightFillPress: var(--white800); --buttonLightIconDefault: var(--iconTetriary); --buttonLightIconHover: var(--iconTetriary); --buttonLightIconPress: var(--iconSecondary); --buttonTetriaryFillDefault: var(--orange100); --buttonTetriaryFillHover: var(--orange200); --buttonTetriaryFillPress: var(--orange300); --buttonTetriaryTextDefault: var(--orange1000); --buttonTetriaryTextHover: var(--orange1000); --buttonTetriaryTextPress: var(--orange1200); --buttonLinkFillHover: var(--gray400); --buttonLinkFillPress: var(--gray500); --buttonLinkTextDefault: var(--textSecondary); --buttonLinkTextHover: var(--textSecondary); --buttonLinkTextPress: var(--textTetriary); --buttonLinkIconDefault: var(--iconSecondary); --buttonLinkIconHover: var(--iconSecondary); --buttonLinkIconPress: var(--iconTetriary); --buttonLinkAccentTextDefault: var(--orange1000); --buttonSecondaryFillHover: var(--gray400); --buttonSecondaryTextHover: var(--textMain); --buttonFillDisabled: var(--gray200); --buttonTextDisabled: var(--textQuaternary); /* ── Segmented control (plan picker) ── */ --segmentedControlContainerFill: var(--gray200); --segmentedControlButtonFillActive: var(--white1000); --segmentedControlButtonTextDefault: var(--textSecondary); --segmentedControlButtonTextHover: var(--textMain); --segmentedControlButtonTextActive: var(--textMain); --segmentedTabsButtonFillActive: var(--gray400); --segmentedTabsButtonFillHover: var(--gray100); --segmentedTabsButtonFillPress: var(--gray200); --segmentedControlButtonIconDefault: var(--iconSecondary); --segmentedControlButtonIconActive: var(--iconMain); /* Navbar blur (Figma Header) */ --blurBar: var(--white900); /* ── Chips (Tag indicator) ── */ --chipsActiveFillDefault: var(--orange1000); --chipsActiveTextDefault: var(--textWhiteMain); --chipsInactiveTextDefault: var(--textSecondary); /* ── Tag (WEB Design System — orange subtle / header coverage) ── */ --tag-radius: 8px; --tag-radius-pill: var(--r-pill); --tag-padding-y: 4px; --tag-padding-x: 6px; --tag-padding-x-pill: 12px; --tag-gap: 6px; --tag-border-width: 1.5px; --tag-orange-subtle-fill: var(--orange100Hard); --tag-orange-subtle-text: var(--buttonTetriaryTextPress); --tag-orange-subtle-border: var(--borderActive); --tag-orange-subtle-indicator: var(--chipsActiveFillDefault); /* ── Rows ── */ --fillRowHover: var(--gray50); --fillRowPressed: var(--gray100); /* ── Shadows (globals.scss) ── */ --shadow1: 0px 2px 24px 2px rgba(0, 0, 0, 0.08); --shadow-2: 0 3px 38px 4px rgba(0, 0, 0, 0.04); --shadow-3: 0 2px 50px 4px rgba(0, 0, 0, 0.1); --searchDropdownShadow: var(--shadow-3); --ddShadow: var(--shadow-3); /* ── Typography (fonts.scss — full-visual-site-export) ── */ --font-family: 'Inter', 'Arial', 'Verdana', sans-serif; --font-sans: var(--font-family); --f24-semiBold: 600 24px/32px var(--font-family); --f24-semiBold-ls: -0.1px; --f20-semiBold: 600 20px/24px var(--font-family); --f20-semiBold-ls: -0.2px; --f20-bold: 700 20px/24px var(--font-family); --f20-bold-ls: 0.3px; --f18: normal 18px/28px var(--font-family); --f18-ls: -0.12px; --f17: normal 17px/22px var(--font-family); --f17-ls: -0.12px; --f17-medium: 500 17px/22px var(--font-family); --f17-medium-ls: -0.12px; --f17-semiBold: 600 17px/22px var(--font-family); --f17-semiBold-ls: -0.12px; --f16-bold: 700 16px/20px var(--font-family); --f16-bold-ls: 0; --f14: normal 14px/20px var(--font-family); --f14-ls: 0.05px; --f14-medium: 500 14px/18px var(--font-family); --f14-medium-ls: 0; --f14-semiBold: 600 14px/18px var(--font-family); --f14-semiBold-ls: 0; --f14-bold: 700 14px/18px var(--font-family); --f14-bold-ls: -0.1px; --f12: normal 12px/18px var(--font-family); --f12-ls: 0.2px; --f12-medium: 500 12px/16px var(--font-family); --f12-medium-ls: 0.2px; --f12-semiBold: 600 12px/16px var(--font-family); --f12-semiBold-ls: 0.2px; --f12-bold: 700 12px/16px var(--font-family); --f12-bold-ls: 0.1px; --f10: normal 10px/14px var(--font-family); --f10-ls: 0.12px; --f10-medium: 500 10px/12px var(--font-family); --f10-medium-ls: 0.12px; /* Map country labels (SVG) — Regular 12px per spec */ --map-label-size-px: 12; --map-label-font-family: var(--font-family); --map-label-font-weight: 400; --map-label-letter-spacing: var(--f12-ls); --map-label-fill: var(--textMain); --map-label-stroke: var(--white1000); --map-country-stroke-hover: var(--white1000); --ui-emoji-empty-size: 34px; /* ── UI chrome (tooltips, loader text — not map fills) ── */ --map-tooltip-bg: var(--black1000); --map-tooltip-text: var(--textWhiteMain); --map-tooltip-sub: var(--textWhiteTetriary); --map-surface-elevated: var(--white1000); --map-spinner-track: var(--orange200); --map-spinner-active: var(--orange1000); /* ── Map-only (unchanged) ── */ --covered: var(--orange1000); --covered-h: var(--orange1100); --covered-sel: var(--orange1200); --covered-g: #f4a846; --covered-g-h: var(--orange1100); --yellow: #b0b8c8; --yellow-h: #9aa3b4; --yellow-d: #b0b8c8; --ocean: var(--blue300); --ocean-deep: var(--blue400); /* ── Legacy aliases (index.html) ── */ --logo: var(--textAccent); --brand: var(--buttonPrimaryFillDefault); --brand-emph: var(--buttonTetriaryTextPress); --brand-subtle: var(--orange100Hard); --on-brand: var(--buttonPrimaryTextDefault); --bg: var(--backgroundWhiteToBlack2); --bg-2: var(--backgroundGrayToBlack1); --text-1: var(--textMain); --text-2: var(--textSecondary); --text-3: var(--textTetriary); --border: var(--borderMain); --border-md: var(--borderTetriary); --r-pill: 500px; --sidebar-width: 288px; --sidebar-inset-x: 16px; --sidebar-inset-y: 24px; --sidebar-radius: 24px; --r-card: 20px; --r-sec: 24px; --r-btn-lg: 16px; --r-btn-md: 20px; --r-input: 16px; /* Layout — globals.scss / Navbar (full-visual-site-export) */ --header-desktop: 60px; --header-mobile: 52px; --container-padding-x: 16px; /* Navbar export uses 1344px; coverage header matches ~448px side inset at 1920 → 1024px row */ --header-inner-max: 1024px; --max-1312-p16: 1344px; --logo-width: 90px; --logo-height: 30px; /* InputField / header search (compact vs default 46×16) */ --search-field-height: 40px; --search-field-radius: 20px; --sheet-mobile-shadow: 0 -6px 28px rgba(0, 0, 0, 0.12); color-scheme: light; } /* ── Dark theme (export [data-theme='dark']) ── */ [data-theme='dark'] { color-scheme: dark; --backgroundGrayToBlack1: var(--black1000); --backgroundGrayToBlack2: var(--black900Hard); --backgroundGrayToBlack3: var(--black800Hard); --backgroundWhiteToBlack1: var(--black1000); --backgroundWhiteToBlack2: var(--black900Hard); --backgroundWhiteToBlack3: var(--black800Hard); --textMain: var(--white1000); --textSecondary: var(--white900); --textTetriary: var(--white700); --textQuaternary: var(--white500); --textWhiteSecondary: var(--white700); --textWhiteTetriary: var(--white600); --iconMain: var(--white900); --iconSecondary: var(--white800); --iconTetriary: var(--white600); --iconQuaternary: var(--gray700); --borderMain: var(--white100); --borderSecondary: var(--white200); --borderTetriary: var(--white400); --inputFillDefault: var(--white300); --inputFillHover: var(--white320); --inputFillActive: var(--white340); --inputTextDefault: var(--white800); --inputTextInput: var(--white1000); --inputTextPlaceholder: var(--textQuaternary); --inputIconDefault: var(--iconWhiteSecondary); --buttonPrimaryFillDefault: var(--white1000); --buttonPrimaryFillHover: var(--white1000); --buttonPrimaryFillPress: var(--white1000); --buttonPrimaryTextDefault: var(--black1000); --buttonPrimaryTextHover: var(--black800Hard); --buttonPrimaryTextPress: var(--black700Hard); --buttonSecondaryFillDefault: var(--white300); --buttonSecondaryTextDefault: var(--white900); --buttonLightFillDefault: var(--white1000); --buttonLightFillHover: var(--white900); --buttonLightFillPress: var(--white800); --buttonLightIconDefault: var(--iconTetriary); --buttonLightIconHover: var(--iconTetriary); --buttonLightIconPress: var(--iconSecondary); --buttonTetriaryFillDefault: var(--orange100); --buttonTetriaryFillHover: var(--orange200); --buttonTetriaryFillPress: var(--orange300); --buttonTetriaryTextDefault: var(--orange1000); --buttonTetriaryTextHover: var(--orange1000); --buttonTetriaryTextPress: var(--orange1200); --buttonFillDisabled: var(--white100); --buttonTextDisabled: var(--textQuaternary); --segmentedControlContainerFill: var(--white100); --segmentedControlButtonFillActive: var(--white340); --segmentedControlButtonTextDefault: var(--white900); --segmentedControlButtonTextHover: var(--white1000); --segmentedControlButtonTextActive: var(--textMain); --segmentedTabsButtonFillActive: var(--white400); --segmentedTabsButtonFillHover: var(--white100); --segmentedTabsButtonFillPress: var(--white200); --segmentedControlButtonIconDefault: var(--iconSecondary); --segmentedControlButtonIconActive: var(--iconMain); --buttonLinkFillHover: var(--white200); --buttonLinkFillPress: var(--white200); --buttonLinkTextDefault: var(--white900); --buttonLinkTextHover: var(--white900); --buttonLinkTextPress: var(--white800); --buttonLinkIconDefault: var(--iconSecondary); --buttonLinkIconHover: var(--iconSecondary); --buttonLinkIconPress: var(--iconTetriary); --buttonSecondaryFillHover: var(--white300); --buttonSecondaryTextHover: var(--white1000); --blurBar: var(--black900); --fillRowHover: var(--white100); --fillRowPressed: var(--white200); --fillCheckboxDefault: var(--white200); --fillCheckboxDefaultHover: var(--white300); --fillCheckboxDefaultPressed: var(--black350); --fillCheckboxActive: var(--yellow1000); --fillCheckboxActiveHover: var(--yellow1100); --fillCheckboxActivePress: var(--yellow1200); --fillRadiobuttonDefault: var(--white200); --fillRadiobuttonDefaultHover: var(--white300); --fillRadiobuttonDefaultPressed: var(--black350); --fillRadiobuttonActive: var(--orange1000); --fillRadiobuttonActiveHover: var(--orange1100); --fillRadiobuttonActivePress: var(--orange1200); --tag-orange-subtle-fill: var(--orange200); --tag-orange-subtle-text: var(--buttonTetriaryTextPress); --tag-orange-subtle-border: var(--borderActive); --tag-orange-subtle-indicator: var(--chipsActiveFillDefault); --shadow1: 0px 2px 24px 2px rgba(0, 0, 0, 0.45); --shadow-2: 0 3px 38px 4px rgba(0, 0, 0, 0.35); --shadow-3: 0 2px 50px 4px rgba(0, 0, 0, 0.55); --searchDropdownShadow: 0 29px 50px 4px rgba(0, 0, 0, 0.7); --ddShadow: var(--searchDropdownShadow); --map-label-fill: var(--textMain); --map-label-stroke: var(--black1000); --map-tooltip-bg: var(--black800Hard); --map-tooltip-text: var(--textWhiteMain); --map-tooltip-sub: var(--textWhiteTetriary); --map-surface-elevated: var(--backgroundWhiteToBlack3); --map-spinner-track: var(--orange300); --map-country-stroke-hover: var(--white1000); --logo: var(--textAccent); --brand: var(--buttonPrimaryFillDefault); --brand-emph: var(--buttonTetriaryTextPress); --brand-subtle: var(--orange200); --on-brand: var(--buttonPrimaryTextDefault); --bg: var(--backgroundWhiteToBlack2); --bg-2: var(--backgroundGrayToBlack1); --text-1: var(--textMain); --text-2: var(--textSecondary); --text-3: var(--textTetriary); --border: var(--borderMain); --border-md: var(--borderTetriary); --sheet-mobile-shadow: 0 -8px 40px rgba(0, 0, 0, 0.55); } .f10 { font: var(--f10); letter-spacing: var(--f10-ls); } .f10-medium { font: var(--f10-medium); letter-spacing: var(--f10-medium-ls); } .f12 { font: var(--f12); letter-spacing: var(--f12-ls); } .f12-medium { font: var(--f12-medium); letter-spacing: var(--f12-medium-ls); } .f12-semiBold { font: var(--f12-semiBold); letter-spacing: var(--f12-semiBold-ls); } .f12-bold { font: var(--f12-bold); letter-spacing: var(--f12-bold-ls); } .f14 { font: var(--f14); letter-spacing: var(--f14-ls); } .f14-medium { font: var(--f14-medium); letter-spacing: var(--f14-medium-ls); } .f14-semiBold { font: var(--f14-semiBold); letter-spacing: var(--f14-semiBold-ls); } .f14-bold { font: var(--f14-bold); letter-spacing: var(--f14-bold-ls); } .f16-bold { font: var(--f16-bold); letter-spacing: var(--f16-bold-ls); } .f17 { font: var(--f17); letter-spacing: var(--f17-ls); } .f17-semiBold { font: var(--f17-semiBold); letter-spacing: var(--f17-semiBold-ls); } .f18 { font: var(--f18); letter-spacing: var(--f18-ls); } .f24-semiBold { font: var(--f24-semiBold); letter-spacing: var(--f24-semiBold-ls); } .f20-semiBold { font: var(--f20-semiBold); letter-spacing: var(--f20-semiBold-ls); } .f20-bold { font: var(--f20-bold); letter-spacing: var(--f20-bold-ls); } .textMain { color: var(--textMain); } .textSecondary { color: var(--textSecondary); } .textTetriary { color: var(--textTetriary); } .textAccent { color: var(--textAccent); }