/* ============================================================ DrugSign Design System — Colors & Type Theme: Serious, ominous, taboo. Coral on charcoal. ============================================================ */ :root { /* ────────── Brand ────────── */ --ds-coral: #FA5051; /* Primary brand / CTA / accent */ --ds-coral-hover: #FF6868; --ds-coral-press: #E04344; --ds-coral-dim: rgba(250, 80, 81, 0.15); /* ghost fills, badges */ --ds-coral-soft: rgba(250, 80, 81, 0.08); --ds-coral-border: rgba(250, 80, 81, 0.30); --ds-coral-glow: rgba(250, 80, 81, 0.55); /* drop-shadow */ /* ────────── Charcoal / Surface ────────── */ --ds-bg-page: #1C1F24; /* outermost — beyond the device */ --ds-bg-primary: #292E34; /* primary canvas */ --ds-bg-secondary: #374047; /* segmented, search, inset */ --ds-bg-card: #333840; /* opaque card */ --ds-bg-input: #3A4049; /* field surface */ /* ────────── Glass (used over charcoal) ────────── */ --ds-glass: rgba(255, 255, 255, 0.06); --ds-glass-strong: rgba(255, 255, 255, 0.10); --ds-glass-soft: rgba(255, 255, 255, 0.03); --ds-glass-border: rgba(255, 255, 255, 0.12); --ds-glass-border-soft: rgba(255, 255, 255, 0.06); /* ────────── Text ────────── */ --ds-fg-primary: #DDDDDD; /* body text on dark */ --ds-fg-secondary: #999999; /* meta, captions */ --ds-fg-placeholder: #666666; /* placeholder, disabled */ --ds-fg-on-coral: #FFFFFF; --ds-fg-overline: var(--ds-coral); /* uppercase field labels */ /* ────────── Border ────────── */ --ds-border: rgba(255, 255, 255, 0.08); --ds-divider: rgba(255, 255, 255, 0.06); /* ────────── Semantic — categorical (used for crime pins, status) ────────── */ --ds-cat-drug: #E74C3C; /* drug-related crime */ --ds-cat-breakin: #3498DB; /* break-in */ --ds-cat-hijack: #F39C12; /* hijacking, warning */ --ds-cat-fraud: #9B59B6; /* fraud */ --ds-cat-murder: #2C3E50; /* murder */ --ds-cat-alcohol: #16A085; /* alcohol-related */ --ds-cat-rape: #C0392B; /* sexual assault */ --ds-cat-violence: #D35400; /* violence */ /* ────────── Status ────────── */ --ds-success: #34C759; --ds-success-dim: rgba(52, 199, 89, 0.15); --ds-warning: #E8962E; --ds-info: #5DADE2; --ds-info-dim: rgba(52, 152, 219, 0.12); --ds-user-blue: #0A84FF; /* "you are here" location dot */ /* ────────── Radii ────────── */ --ds-radius-xs: 6px; --ds-radius-sm: 8px; --ds-radius: 10px; --ds-radius-md: 14px; --ds-radius-lg: 18px; --ds-radius-xl: 28px; /* hero glass panes */ --ds-radius-pill: 999px; --ds-radius-device: 44px; /* phone bezel */ /* ────────── Spacing (8pt grid) ────────── */ --ds-space-xs: 4px; --ds-space-s: 8px; --ds-space-m: 16px; --ds-space-pad: 20px; /* horizontal page margins */ --ds-space-l: 24px; --ds-space-xl: 32px; /* ────────── Shadows / Elevation ────────── */ --ds-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.06); --ds-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.40); --ds-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 0.5px rgba(255, 255, 255, 0.04); --ds-shadow-device: 0 25px 80px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.05); --ds-shadow-cta: 0 4px 15px rgba(250, 80, 81, 0.30); --ds-shadow-cta-hover: 0 6px 20px rgba(250, 80, 81, 0.40); --ds-shadow-fp: drop-shadow(0 8px 18px rgba(250, 80, 81, 0.55)); /* ────────── Web surface (marketing + admin) — diverges from app ────────── */ /* Coral on web is slightly cooler than the iOS coral. */ --ds-web-coral: #EB4C50; --ds-web-coral-hover: #c73a3e; --ds-web-coral-dim: rgba(235, 76, 80, 0.12); /* Web charcoals (deeper than the app's) */ --ds-web-bg-deep: #0C1923; /* nav, header, footer, deepest dark */ --ds-web-bg-panel: #2C333B; /* hero, dark panels, sidebar */ --ds-web-bg-panel-2: #374047; /* sidebar hover */ --ds-web-bg-light: #F4F6F9; /* page bg / data tables surround */ --ds-web-bg-card: #FFFFFF; --ds-web-fg-text: #313640; /* body on light */ --ds-web-fg-label: #313640; /* table cell strong */ --ds-web-fg-muted: #94938F; /* meta on light */ --ds-web-fg-table-th: #8899AA; /* table header label */ --ds-web-border: #E0E0E0; --ds-web-divider: #f0f2f5; --ds-web-row-hover: #FAFBFD; --ds-web-th-bg: #F8FAFC; --ds-web-blue: #4477C8; /* admin primary CTA — coral is reserved for danger */ --ds-web-blue-hover: #3362b0; --ds-web-blue-dim: rgba(68, 119, 200, 0.12); --ds-web-success: #4CAF50; --ds-web-purple: #8B5CF6; /* "Updated" badge */ /* Web container + nav */ --ds-web-max: 1140px; --ds-web-nav-h: 72px; /* Web font — Open Sans (loaded via Google Fonts in each kit) */ --ds-web-font: "Open Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* ────────── Blur (liquid glass) ────────── */ --ds-blur-sheet: blur(20px); --ds-blur-pane: blur(30px); --ds-blur-sat: blur(18px) saturate(160%); /* ────────── Typography ────────── */ /* DrugSign mirrors iOS Dynamic Type — system font, no custom face */ --ds-font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Inter", system-ui, sans-serif; --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Type scale (pt = px on the mockup canvas) */ --ds-fs-large-title: 34px; --ds-fw-large-title: 700; --ds-fs-title-1: 28px; --ds-fw-title-1: 700; --ds-fs-title-3: 20px; --ds-fw-title-3: 600; --ds-fs-headline: 17px; --ds-fw-headline: 600; /* nav titles */ --ds-fs-body: 17px; --ds-fw-body: 400; /* form input */ --ds-fs-callout: 16px; --ds-fw-callout: 400; /* tile titles */ --ds-fs-subheadline: 15px; --ds-fw-subheadline: 400; --ds-fs-footnote: 13px; --ds-fw-footnote: 600; /* segmented, eyebrow */ --ds-fs-caption: 12px; --ds-fw-caption: 400; --ds-fs-overline: 11px; --ds-fw-overline: 500; /* uppercase field labels */ --ds-fs-micro: 10px; --ds-fw-micro: 700; /* tab bar labels */ /* Letter-spacing for uppercase */ --ds-tracking-tight: -0.2px; --ds-tracking-normal: 0; --ds-tracking-wide: 0.5px; --ds-tracking-wider: 1px; --ds-tracking-widest: 1.5px; /* Line heights */ --ds-lh-tight: 1.1; --ds-lh-snug: 1.25; --ds-lh-base: 1.4; --ds-lh-relaxed:1.5; /* Motion */ --ds-ease: cubic-bezier(.2, .8, .2, 1); --ds-dur-fast: 150ms; --ds-dur: 250ms; --ds-dur-slow: 480ms; } /* ============================================================ Semantic element styles (use as base in artifacts) ============================================================ */ .ds-body { font-family: var(--ds-font-system); background: var(--ds-bg-page); color: var(--ds-fg-primary); font-size: var(--ds-fs-body); line-height: var(--ds-lh-base); -webkit-font-smoothing: antialiased; } /* Headings */ .ds-h1, h1.ds { font-size: var(--ds-fs-large-title); font-weight: var(--ds-fw-large-title); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-tracking-tight); color: var(--ds-fg-primary); } .ds-h2, h2.ds { font-size: var(--ds-fs-title-1); font-weight: var(--ds-fw-title-1); line-height: var(--ds-lh-tight); color: var(--ds-fg-primary); } .ds-h3, h3.ds { font-size: var(--ds-fs-title-3); font-weight: var(--ds-fw-title-3); line-height: var(--ds-lh-snug); color: var(--ds-fg-primary); } .ds-headline { font-size: var(--ds-fs-headline); font-weight: var(--ds-fw-headline); color: var(--ds-fg-primary); } .ds-callout { font-size: var(--ds-fs-callout); font-weight: 600; color: var(--ds-fg-primary); } .ds-p, p.ds { font-size: var(--ds-fs-body); line-height: var(--ds-lh-base); color: var(--ds-fg-primary); } .ds-sub { font-size: var(--ds-fs-subheadline); color: var(--ds-fg-secondary); } .ds-caption { font-size: var(--ds-fs-caption); color: var(--ds-fg-secondary); } /* Coral uppercase floating field labels — DrugSign signature */ .ds-overline { font-size: var(--ds-fs-overline); font-weight: var(--ds-fw-overline); color: var(--ds-coral); text-transform: uppercase; letter-spacing: 0.3px; } /* Section header above grouped lists (iOS list section header) */ .ds-section-header { font-size: var(--ds-fs-footnote); font-weight: 600; color: var(--ds-fg-secondary); text-transform: uppercase; letter-spacing: var(--ds-tracking-wide); } .ds-mono { font-family: var(--ds-font-mono); font-size: var(--ds-fs-caption); }