/* GEPHA Design System — components Requires tokens.css. Every rule reads semantic tokens only, so one class set renders as GEPHA, GPC or Pharmadepot depending on . */ /* ---------- Button ---------- */ .gds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gds-space-2); min-height: 44px; padding: 0 var(--gds-space-6); font: 600 var(--gds-text-md)/1.2 var(--gds-font-heading); border: 0; border-radius: var(--gds-radius-button); background: var(--gds-primary); color: var(--gds-on-primary); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, box-shadow .15s ease; } .gds-btn:hover { background: var(--gds-primary-hover); } .gds-btn:focus-visible { outline: 3px solid var(--gds-focus-ring); outline-offset: 2px; } .gds-btn:disabled, .gds-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; } .gds-btn svg { width: 20px; height: 20px; flex: none; } .gds-btn--secondary { background: var(--gds-secondary); color: var(--gds-on-secondary); } .gds-btn--secondary:hover { background: var(--gds-secondary-hover); } .gds-btn--soft { background: var(--gds-primary-soft); color: var(--gds-on-primary-soft); } .gds-btn--soft:hover { box-shadow: inset 0 0 0 1.5px var(--gds-on-primary-soft); background: var(--gds-primary-soft); } .gds-btn--accent { background: var(--gds-accent); color: var(--gds-on-accent); } .gds-btn--accent:hover { background: var(--gds-accent); box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .08); } .gds-btn--ghost { background: transparent; color: var(--gds-link); box-shadow: inset 0 0 0 1.5px currentColor; } .gds-btn--ghost:hover { background: var(--gds-primary-soft); } .gds-btn--danger { background: var(--gds-danger); color: var(--gds-on-danger); } .gds-btn--danger:hover { background: var(--gds-danger); box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .12); } .gds-btn--sm { min-height: 36px; padding: 0 var(--gds-space-4); font-size: var(--gds-text-sm); } .gds-btn--lg { min-height: 52px; padding: 0 var(--gds-space-8); font-size: var(--gds-text-lg); } .gds-btn--block { display: flex; width: 100%; } .gds-btn--icon { padding: 0; width: 44px; } /* ---------- Link ---------- */ .gds-link { color: var(--gds-link); text-decoration: underline; text-underline-offset: 3px; } .gds-link:hover { text-decoration-thickness: 2px; } /* ---------- Badge ---------- */ .gds-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--gds-radius-pill); font: 600 var(--gds-text-xs)/1.6 var(--gds-font-sans); background: var(--gds-primary); color: var(--gds-on-primary); } .gds-badge--soft { background: var(--gds-primary-soft); color: var(--gds-on-primary-soft); } .gds-badge--accent { background: var(--gds-accent); color: var(--gds-on-accent); } .gds-badge--neutral { background: var(--gds-secondary); color: var(--gds-on-secondary); } .gds-badge--success { background: var(--gds-success); color: var(--gds-on-success); } .gds-badge--warning { background: var(--gds-warning); color: var(--gds-on-warning); } .gds-badge--danger { background: var(--gds-danger); color: var(--gds-on-danger); } /* ---------- Alert ---------- */ .gds-alert { display: grid; grid-template-columns: 24px 1fr; gap: var(--gds-space-3); align-items: start; padding: var(--gds-space-4); border-radius: var(--gds-radius-card); background: var(--gds-primary-soft); color: var(--gds-text); border-left: 4px solid var(--gds-primary); } .gds-alert > svg { width: 24px; height: 24px; color: var(--gds-primary); } .gds-alert strong { display: block; margin-bottom: 2px; } .gds-alert--success { background: var(--gds-success-soft); border-color: var(--gds-success); } .gds-alert--success > svg { color: var(--gds-success); } .gds-alert--warning { background: var(--gds-warning-soft); border-color: var(--gds-warning); } .gds-alert--warning > svg { color: var(--gds-warning); } .gds-alert--danger { background: var(--gds-danger-soft); border-color: var(--gds-danger); } .gds-alert--danger > svg { color: var(--gds-danger); } .gds-alert--promo { background: var(--gds-accent-soft); border-color: var(--gds-accent); color: var(--gds-on-accent-soft); } .gds-alert--promo > svg { color: var(--gds-on-accent-soft); } /* ---------- Form fields ---------- */ .gds-field { display: grid; gap: var(--gds-space-1); } .gds-label { font: 600 var(--gds-text-sm)/1.4 var(--gds-font-sans); color: var(--gds-text); } .gds-help { font-size: var(--gds-text-xs); color: var(--gds-text-muted); } .gds-error { font-size: var(--gds-text-xs); color: var(--gds-danger); font-weight: 600; } .gds-input, .gds-select, .gds-textarea { width: 100%; min-height: 44px; padding: 10px var(--gds-space-4); font: var(--gds-text-md)/1.4 var(--gds-font-sans); color: var(--gds-text); background: var(--gds-surface); border: 1px solid var(--gds-border-strong); border-radius: var(--gds-radius-input); transition: border-color .15s ease, box-shadow .15s ease; } .gds-textarea { min-height: 96px; resize: vertical; } .gds-input::placeholder, .gds-textarea::placeholder { color: var(--gds-text-muted); opacity: 1; } .gds-input:hover, .gds-select:hover, .gds-textarea:hover { border-color: var(--gds-text-muted); } .gds-input:focus, .gds-select:focus, .gds-textarea:focus { outline: none; border-color: var(--gds-focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gds-focus-ring) 30%, transparent); } .gds-input[aria-invalid="true"] { border-color: var(--gds-danger); } .gds-input:disabled { background: var(--gds-surface-muted); color: var(--gds-text-muted); cursor: not-allowed; } .gds-select { appearance: none; padding-right: 40px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .gds-check { display: inline-flex; align-items: center; gap: var(--gds-space-2); cursor: pointer; min-height: 32px; } .gds-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--gds-primary); cursor: pointer; } .gds-check input:focus-visible { outline: 3px solid var(--gds-focus-ring); outline-offset: 2px; } .gds-switch { display: inline-flex; align-items: center; gap: var(--gds-space-3); cursor: pointer; min-height: 32px; } .gds-switch input { appearance: none; margin: 0; width: 44px; height: 26px; border-radius: 999px; cursor: pointer; background: var(--gds-border-strong); position: relative; transition: background-color .15s ease; } .gds-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: var(--gds-shadow-sm); transition: transform .15s ease; } .gds-switch input:checked { background: var(--gds-primary); } .gds-switch input:checked::after { transform: translateX(18px); } .gds-switch input:focus-visible { outline: 3px solid var(--gds-focus-ring); outline-offset: 2px; } /* ---------- Card ---------- */ .gds-card { background: var(--gds-surface); color: var(--gds-text); border: 1px solid var(--gds-border); border-radius: var(--gds-radius-card); padding: var(--gds-space-6); box-shadow: var(--gds-shadow-sm); } /* Product card (pharmacy e-commerce) */ .gds-product { display: flex; flex-direction: column; gap: var(--gds-space-2); background: var(--gds-surface); color: var(--gds-text); border: 1px solid var(--gds-border); border-radius: var(--gds-radius-card); padding: var(--gds-space-4); position: relative; min-width: 0; } .gds-product__media { aspect-ratio: 1; border-radius: calc(var(--gds-radius-card) - 6px); background: var(--gds-surface-muted); display: grid; place-items: center; overflow: hidden; } .gds-product__media img, .gds-product__media svg { width: 70%; height: 70%; object-fit: contain; } .gds-product__tag { position: absolute; top: var(--gds-space-6); left: var(--gds-space-6); } .gds-product__title { font: 500 var(--gds-text-md)/1.4 var(--gds-font-heading); margin: var(--gds-space-1) 0 0; } .gds-product__meta { font-size: var(--gds-text-xs); color: var(--gds-text-muted); } .gds-product__price { display: flex; align-items: baseline; gap: var(--gds-space-2); margin-top: auto; padding-top: var(--gds-space-2); } .gds-product__price b { font: 700 var(--gds-text-lg)/1 var(--gds-font-heading); } .gds-product__price s { font-size: var(--gds-text-sm); color: var(--gds-text-muted); } /* ---------- Table ---------- */ .gds-table { width: 100%; border-collapse: collapse; font-size: var(--gds-text-sm); color: var(--gds-text); } .gds-table th { text-align: left; font-weight: 600; color: var(--gds-text-muted); padding: var(--gds-space-3); border-bottom: 2px solid var(--gds-border); } .gds-table td { padding: var(--gds-space-3); border-bottom: 1px solid var(--gds-border); } .gds-table tbody tr:hover td { background: var(--gds-surface-muted); } .gds-table tr.is-selected td { background: var(--gds-primary-soft); color: var(--gds-on-primary-soft); } .gds-table .num { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Tabs ---------- */ .gds-tabs { display: flex; gap: var(--gds-space-1); border-bottom: 1px solid var(--gds-border); overflow-x: auto; } .gds-tab { font: 600 var(--gds-text-sm)/1 var(--gds-font-heading); color: var(--gds-text-muted); background: none; border: 0; padding: var(--gds-space-3) var(--gds-space-4); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; } .gds-tab:hover { color: var(--gds-text); } .gds-tab[aria-selected="true"] { color: var(--gds-link); border-bottom-color: var(--gds-primary); } .gds-tab:focus-visible { outline: 3px solid var(--gds-focus-ring); outline-offset: -3px; border-radius: 4px; }