/* GEPHA Design System — tokens Three brands share one semantic token set: GEPHA default (no attribute) 006D77 · 83C5BE · EDF6F9 · FFDDD2 · E29578 GPC 006BCE · 0054A3 · F2F9FF · FFBD2E · 051224 Pharmadepot 00AAAD · 008486 · FFF200 · 2E3192 · 051224 Theme: follows the OS, or force with . UI code uses the semantic tokens (--gds-bg, --gds-primary, …), never the raw palette. Every brand × theme block defines the full semantic set — scripts/check-tokens.mjs enforces it. */ :root { /* ================= Primitives ================= */ /* GEPHA palette */ --gds-brand-teal: #006D77; --gds-brand-mint: #83C5BE; --gds-brand-ice: #EDF6F9; --gds-brand-peach: #FFDDD2; --gds-brand-coral: #E29578; --gds-brand-logo: #00AFAA; /* GEPHA wordmark only */ --gds-teal-50: #EBF3F4; --gds-teal-100: #D1E5E7; --gds-teal-200: #A3CACE; --gds-teal-300: #73AFB4; --gds-teal-400: #388D95; --gds-teal-500: #006D77; --gds-teal-600: #005D65; --gds-teal-700: #004C53; --gds-teal-800: #003C41; --gds-teal-900: #002C30; --gds-coral-50: #FDF7F4; --gds-coral-100: #FAECE7; --gds-coral-200: #F5D9CE; --gds-coral-300: #EFC5B5; --gds-coral-400: #E8AC96; --gds-coral-500: #E29578; --gds-coral-600: #C07F66; --gds-coral-700: #9E6854; --gds-coral-800: #7C5242; --gds-coral-900: #5A3C30; /* GPC palette (from gpc.ge) */ --gds-gpc-blue: #006BCE; --gds-gpc-blue-dark: #0054A3; --gds-gpc-blue-light: #F2F9FF; --gds-gpc-yellow: #FFBD2E; --gds-gpc-blue-50: #EBF3FB; --gds-gpc-blue-100: #D1E4F6; --gds-gpc-blue-200: #A3CAED; --gds-gpc-blue-300: #73AEE4; --gds-gpc-blue-400: #388CD9; --gds-gpc-blue-500: #006BCE; --gds-gpc-blue-600: #0054A3; --gds-gpc-blue-700: #004B90; --gds-gpc-blue-800: #003B71; --gds-gpc-blue-900: #002B52; /* Pharmadepot palette (from pharmadepot.ge + logo) */ --gds-pd-teal: #00AAAD; --gds-pd-teal-dark: #008486; --gds-pd-yellow: #FFF200; --gds-pd-navy: #2E3192; --gds-pd-teal-50: #EBF8F8; --gds-pd-teal-100: #D1F0F0; --gds-pd-teal-200: #A3E0E1; --gds-pd-teal-300: #73D0D2; --gds-pd-teal-400: #38BDBF; --gds-pd-teal-500: #00AAAD; --gds-pd-teal-600: #008486; --gds-pd-teal-700: #007779; --gds-pd-teal-800: #005E5F; --gds-pd-teal-900: #004445; --gds-pd-yellow-50: #FFFEEB; --gds-pd-yellow-100: #FFFDD1; --gds-pd-yellow-200: #FFFAA3; --gds-pd-yellow-300: #FFF873; --gds-pd-yellow-400: #FFF538; --gds-pd-yellow-500: #FFF200; --gds-pd-yellow-600: #D9CE00; --gds-pd-yellow-700: #B2A900; --gds-pd-yellow-800: #8C8500; --gds-pd-yellow-900: #666100; --gds-pd-navy-50: #EEEFF6; --gds-pd-navy-100: #D9DAEB; --gds-pd-navy-200: #B4B5D8; --gds-pd-navy-300: #8C8EC3; --gds-pd-navy-400: #5C5EAA; --gds-pd-navy-500: #2E3192; --gds-pd-navy-600: #272A7C; --gds-pd-navy-700: #202266; --gds-pd-navy-800: #191B50; --gds-pd-navy-900: #12143A; /* Retail neutrals (shared by GPC + Pharmadepot) */ --gds-retail-ink: #051224; --gds-retail-gray: #F4F6F8; /* ================= Non-color ================= */ --gds-font-sans: "Inter", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", sans-serif; --gds-font-heading: var(--gds-font-sans); --gds-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --gds-text-xs: 12px; --gds-text-sm: 14px; --gds-text-md: 16px; --gds-text-lg: 20px; --gds-text-xl: 24px; --gds-text-2xl: 32px; --gds-text-3xl: 40px; --gds-text-4xl: 48px; --gds-space-1: 4px; --gds-space-2: 8px; --gds-space-3: 12px; --gds-space-4: 16px; --gds-space-5: 20px; --gds-space-6: 24px; --gds-space-8: 32px; --gds-space-10: 40px; --gds-space-12: 48px; --gds-space-16: 64px; --gds-radius-sm: 4px; --gds-radius-md: 8px; --gds-radius-lg: 12px; --gds-radius-xl: 20px; --gds-radius-2xl: 32px; --gds-radius-pill: 999px; --gds-shadow-sm: 0 1px 2px rgba(0, 44, 48, 0.08); --gds-shadow-md: 0 4px 12px rgba(0, 44, 48, 0.12); --gds-shadow-lg: 0 12px 32px rgba(0, 44, 48, 0.16); /* ================= Semantic: GEPHA · light ================= */ --gds-radius-button: 8px; --gds-radius-input: 8px; --gds-radius-card: 12px; --gds-bg: #EDF6F9; /* page background (ice) */ --gds-surface: #FFFFFF; /* cards, panels */ --gds-surface-muted: #EBF3F4; /* table stripes, wells */ --gds-border: #D1E5E7; /* dividers, card edges */ --gds-border-strong: #6E8B8F; /* form-control edges, ≥3:1 */ --gds-text: #102A2E; --gds-text-muted: #4A6468; --gds-primary: #006D77; /* buttons, active states */ --gds-primary-hover: #005D65; --gds-on-primary: #FFFFFF; --gds-primary-soft: #D1E5E7; /* selected rows, soft buttons */ --gds-on-primary-soft: #004C53; --gds-link: #006D77; /* brand color safe as text */ --gds-secondary: #83C5BE; --gds-secondary-hover: #73AFB4; --gds-on-secondary: #102A2E; --gds-accent: #E29578; /* highlights, badges */ --gds-on-accent: #102A2E; /* never white (2.4:1) */ --gds-accent-soft: #FFDDD2; /* callouts, highlighted rows */ --gds-on-accent-soft: #7C5242; --gds-brand: #006D77; /* brand bands, decoration */ --gds-on-brand: #FFFFFF; --gds-success: #1E7A55; --gds-on-success: #FFFFFF; --gds-success-soft: #E3F2EB; --gds-warning: #8A5A00; --gds-on-warning: #FFFFFF; --gds-warning-soft: #FBF0DB; --gds-danger: #B42318; --gds-on-danger: #FFFFFF; --gds-danger-soft: #FCE8E6; --gds-focus-ring: #006D77; } /* ================= Semantic: GEPHA · dark ================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gds-bg: #0B2F33; --gds-surface: #0F3B40; --gds-surface-muted: #134649; --gds-border: #1F5A5F; --gds-border-strong: #5E8C90; --gds-text: #EDF6F9; --gds-text-muted: #9DB6BA; --gds-primary: #83C5BE; --gds-primary-hover: #A3CACE; --gds-on-primary: #0B2F33; --gds-primary-soft: #134649; --gds-on-primary-soft: #A3CACE; --gds-link: #83C5BE; --gds-secondary: #1F5A5F; --gds-secondary-hover: #286970; --gds-on-secondary: #EDF6F9; --gds-accent: #E29578; --gds-on-accent: #102A2E; --gds-accent-soft: #5A3C30; --gds-on-accent-soft: #FFDDD2; --gds-brand: #83C5BE; --gds-on-brand: #0B2F33; --gds-success: #5CC495; --gds-on-success: #0B2F33; --gds-success-soft: #16433A; --gds-warning: #E8B04B; --gds-on-warning: #0B2F33; --gds-warning-soft: #4A3B18; --gds-danger: #F28B7F; --gds-on-danger: #0B2F33; --gds-danger-soft: #4F2521; --gds-focus-ring: #E29578; } } :root[data-theme="dark"] { --gds-bg: #0B2F33; --gds-surface: #0F3B40; --gds-surface-muted: #134649; --gds-border: #1F5A5F; --gds-border-strong: #5E8C90; --gds-text: #EDF6F9; --gds-text-muted: #9DB6BA; --gds-primary: #83C5BE; --gds-primary-hover: #A3CACE; --gds-on-primary: #0B2F33; --gds-primary-soft: #134649; --gds-on-primary-soft: #A3CACE; --gds-link: #83C5BE; --gds-secondary: #1F5A5F; --gds-secondary-hover: #286970; --gds-on-secondary: #EDF6F9; --gds-accent: #E29578; --gds-on-accent: #102A2E; --gds-accent-soft: #5A3C30; --gds-on-accent-soft: #FFDDD2; --gds-brand: #83C5BE; --gds-on-brand: #0B2F33; --gds-success: #5CC495; --gds-on-success: #0B2F33; --gds-success-soft: #16433A; --gds-warning: #E8B04B; --gds-on-warning: #0B2F33; --gds-warning-soft: #4A3B18; --gds-danger: #F28B7F; --gds-on-danger: #0B2F33; --gds-danger-soft: #4F2521; --gds-focus-ring: #E29578; } /* ================= Semantic: GPC · light ================= */ :root[data-brand="gpc"] { --gds-font-sans: "Avenir Next Georgian", "Noto Sans Georgian", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --gds-font-heading: "Graphik Georgian", "Noto Sans Georgian", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --gds-radius-button: 40px; --gds-radius-input: 12px; --gds-radius-card: 20px; --gds-shadow-sm: 0 1px 2px rgba(5, 18, 36, 0.06); --gds-shadow-md: 0 4px 12px rgba(5, 18, 36, 0.10); --gds-shadow-lg: 0 12px 32px rgba(5, 18, 36, 0.14); --gds-bg: #F4F6F8; --gds-surface: #FFFFFF; --gds-surface-muted: #F5F6F6; --gds-border: #E6E7E9; --gds-border-strong: #848A94; --gds-text: #051224; --gds-text-muted: #505966; --gds-primary: #006BCE; --gds-primary-hover: #0054A3; --gds-on-primary: #FFFFFF; --gds-primary-soft: #F2F9FF; --gds-on-primary-soft: #0054A3; --gds-link: #006BCE; --gds-secondary: #EEF0F2; --gds-secondary-hover: #E6E7E9; --gds-on-secondary: #051224; --gds-accent: #FFBD2E; /* promo, ratings */ --gds-on-accent: #051224; --gds-accent-soft: #FFF8EA; --gds-on-accent-soft: #7A5200; --gds-brand: #006BCE; --gds-on-brand: #FFFFFF; --gds-success: #1E7A55; --gds-on-success: #FFFFFF; --gds-success-soft: #E3F4EC; --gds-warning: #8A5A00; --gds-on-warning: #FFFFFF; --gds-warning-soft: #FFF4DB; --gds-danger: #B42318; --gds-on-danger: #FFFFFF; --gds-danger-soft: #FDECEA; --gds-focus-ring: #006BCE; } /* ================= Semantic: GPC · dark ================= */ @media (prefers-color-scheme: dark) { :root[data-brand="gpc"]:not([data-theme="light"]) { --gds-bg: #051224; --gds-surface: #0C1B30; --gds-surface-muted: #12233B; --gds-border: #22324A; --gds-border-strong: #6B7686; --gds-text: #F4F6F8; --gds-text-muted: #A4ADBA; --gds-primary: #73AEE4; --gds-primary-hover: #A3CAED; --gds-on-primary: #051224; --gds-primary-soft: #0F2A4A; --gds-on-primary-soft: #D1E4F6; --gds-link: #73AEE4; --gds-secondary: #1B2C44; --gds-secondary-hover: #22324A; --gds-on-secondary: #F4F6F8; --gds-accent: #FFBD2E; --gds-on-accent: #051224; --gds-accent-soft: #3A2E12; --gds-on-accent-soft: #FFE3A3; --gds-brand: #73AEE4; --gds-on-brand: #051224; --gds-success: #4CC38A; --gds-on-success: #051224; --gds-success-soft: #0F3326; --gds-warning: #F0B541; --gds-on-warning: #051224; --gds-warning-soft: #3A2E12; --gds-danger: #FF8577; --gds-on-danger: #051224; --gds-danger-soft: #3F1A1A; --gds-focus-ring: #73AEE4; } } :root[data-brand="gpc"][data-theme="dark"] { --gds-bg: #051224; --gds-surface: #0C1B30; --gds-surface-muted: #12233B; --gds-border: #22324A; --gds-border-strong: #6B7686; --gds-text: #F4F6F8; --gds-text-muted: #A4ADBA; --gds-primary: #73AEE4; --gds-primary-hover: #A3CAED; --gds-on-primary: #051224; --gds-primary-soft: #0F2A4A; --gds-on-primary-soft: #D1E4F6; --gds-link: #73AEE4; --gds-secondary: #1B2C44; --gds-secondary-hover: #22324A; --gds-on-secondary: #F4F6F8; --gds-accent: #FFBD2E; --gds-on-accent: #051224; --gds-accent-soft: #3A2E12; --gds-on-accent-soft: #FFE3A3; --gds-brand: #73AEE4; --gds-on-brand: #051224; --gds-success: #4CC38A; --gds-on-success: #051224; --gds-success-soft: #0F3326; --gds-warning: #F0B541; --gds-on-warning: #051224; --gds-warning-soft: #3A2E12; --gds-danger: #FF8577; --gds-on-danger: #051224; --gds-danger-soft: #3F1A1A; --gds-focus-ring: #73AEE4; } /* ================= Semantic: Pharmadepot · light ================= */ /* Brand teal 00AAAD fails with white text (2.9:1): text-bearing fills use 008486, text uses 007779. */ :root[data-brand="pharmadepot"] { --gds-font-sans: "Avenir Next Georgian", "Noto Sans Georgian", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --gds-font-heading: "Graphik Georgian", "Noto Sans Georgian", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --gds-radius-button: 40px; --gds-radius-input: 12px; --gds-radius-card: 20px; --gds-shadow-sm: 0 1px 2px rgba(5, 18, 36, 0.06); --gds-shadow-md: 0 4px 12px rgba(5, 18, 36, 0.10); --gds-shadow-lg: 0 12px 32px rgba(5, 18, 36, 0.14); --gds-bg: #F4F6F8; --gds-surface: #FFFFFF; --gds-surface-muted: #F5F6F6; --gds-border: #E6E7E9; --gds-border-strong: #848A94; --gds-text: #051224; --gds-text-muted: #505966; --gds-primary: #008486; --gds-primary-hover: #007779; --gds-on-primary: #FFFFFF; --gds-primary-soft: #EBF8F8; --gds-on-primary-soft: #005E5F; --gds-link: #007779; --gds-secondary: #EEF0F2; --gds-secondary-hover: #E6E7E9; --gds-on-secondary: #051224; --gds-accent: #FFF200; /* promo — the logo's yellow */ --gds-on-accent: #2E3192; /* the logo's navy */ --gds-accent-soft: #FFFDD1; --gds-on-accent-soft: #2E3192; --gds-brand: #00AAAD; /* bands and decoration, ink text only */ --gds-on-brand: #051224; --gds-success: #1E7A55; --gds-on-success: #FFFFFF; --gds-success-soft: #E3F4EC; --gds-warning: #8A5A00; --gds-on-warning: #FFFFFF; --gds-warning-soft: #FFF4DB; --gds-danger: #B42318; --gds-on-danger: #FFFFFF; --gds-danger-soft: #FDECEA; --gds-focus-ring: #008486; } /* ================= Semantic: Pharmadepot · dark ================= */ @media (prefers-color-scheme: dark) { :root[data-brand="pharmadepot"]:not([data-theme="light"]) { --gds-bg: #051224; --gds-surface: #0C1B30; --gds-surface-muted: #12233B; --gds-border: #22324A; --gds-border-strong: #6B7686; --gds-text: #F4F6F8; --gds-text-muted: #A4ADBA; --gds-primary: #00AAAD; --gds-primary-hover: #38BDBF; --gds-on-primary: #051224; --gds-primary-soft: #0B3033; --gds-on-primary-soft: #A3E0E1; --gds-link: #38BDBF; --gds-secondary: #1B2C44; --gds-secondary-hover: #22324A; --gds-on-secondary: #F4F6F8; --gds-accent: #FFF200; --gds-on-accent: #2E3192; --gds-accent-soft: #3A3812; --gds-on-accent-soft: #FFFAA3; --gds-brand: #00AAAD; --gds-on-brand: #051224; --gds-success: #4CC38A; --gds-on-success: #051224; --gds-success-soft: #0F3326; --gds-warning: #F0B541; --gds-on-warning: #051224; --gds-warning-soft: #3A2E12; --gds-danger: #FF8577; --gds-on-danger: #051224; --gds-danger-soft: #3F1A1A; --gds-focus-ring: #38BDBF; } } :root[data-brand="pharmadepot"][data-theme="dark"] { --gds-bg: #051224; --gds-surface: #0C1B30; --gds-surface-muted: #12233B; --gds-border: #22324A; --gds-border-strong: #6B7686; --gds-text: #F4F6F8; --gds-text-muted: #A4ADBA; --gds-primary: #00AAAD; --gds-primary-hover: #38BDBF; --gds-on-primary: #051224; --gds-primary-soft: #0B3033; --gds-on-primary-soft: #A3E0E1; --gds-link: #38BDBF; --gds-secondary: #1B2C44; --gds-secondary-hover: #22324A; --gds-on-secondary: #F4F6F8; --gds-accent: #FFF200; --gds-on-accent: #2E3192; --gds-accent-soft: #3A3812; --gds-on-accent-soft: #FFFAA3; --gds-brand: #00AAAD; --gds-on-brand: #051224; --gds-success: #4CC38A; --gds-on-success: #051224; --gds-success-soft: #0F3326; --gds-warning: #F0B541; --gds-on-warning: #051224; --gds-warning-soft: #3A2E12; --gds-danger: #FF8577; --gds-on-danger: #051224; --gds-danger-soft: #3F1A1A; --gds-focus-ring: #38BDBF; }