/* ============================================================ Selitics platform tokens (light) Loaded on: landing, onboarding, dashboard, platform_admin. NEVER loaded on the storefront — storefront uses tokens-storefront.css. Palette: clean white base, near-black primary (buttons / active nav / text), teal #20B2AA accent (charts, links, focus, AI, highlights), rounded corners, soft shadows. Modern-SaaS look. Components reference the --color-* aliases. ============================================================ */ :root { /* STRICT PALETTE — only three colours in Selitics: teal #20B2AA, black #000, white #FFF. Every neutral below is pure grayscale (a black↔white mix, not a 4th hue). No amber, brown, red, or blue-grey anywhere. */ /* Primary = pure black (buttons, active nav, primary emphasis). Kept under the legacy --teal-* names so consumers need no edits. */ --teal-50: #F2F2F2; --teal-100: #E0E0E0; --teal-200: #C7C7C7; --teal-300: #9E9E9E; --teal-400: #616161; --teal-500: #262626; --teal-600: #000000; --teal-700: #1A1A1A; --teal-800: #000000; --teal-900: #000000; /* Accent = the brand teal, aliased from brand.css (the single definition, also read by the marketing stylesheet). Kept under the legacy --amber-* names so consumers need no edits. Text on teal-tint fills = --amber-900. */ --amber-50: var(--sel-teal-wash); --amber-100: var(--sel-teal-tint); --amber-300: var(--sel-teal-soft); --amber-400: var(--sel-teal); --amber-500: var(--sel-teal-mid); --amber-700: var(--sel-teal-deep); --amber-900: var(--sel-teal-ink); /* Neutrals — pure grayscale (white page → black text). */ --neutral-0: #FFFFFF; --neutral-50: #FAFAFA; --neutral-100: #F5F6F6; --neutral-200: #E7E9E9; --neutral-300: #C7CFCE; /* 4.54:1 on white. #999999 measured 2.85:1 and is the token every muted label, table head and result count inherits, so the failure was system-wide. */ --neutral-400: #767676; --neutral-500: #5A6362; --neutral-700: #2E3332; --neutral-900: #0A0A0A; --sand: #F5F6F6; /* Semantic — collapsed onto the palette: positive/info = teal, everything else = grayscale (no red, no amber). */ --success: #20B2AA; --success-bg: #E8F7F5; --success-text: #0C4C48; --warning: #5C5C5C; --warning-bg: #F2F2F2; --warning-text: #333333; /* Modern Shopify-grade critical red — the one deliberate exception to the teal/black/white rule, reserved for destructive/error/refund/cancelled. */ --danger: #D72C0D; --danger-bg: #FDECEA; --danger-text: #B42318; --info: #20B2AA; --info-bg: #E8F7F5; --info-text: #14766F; /* Semantic aliases — components reference these, not primitives. `platform_colors` context processor may override these per-deployment. */ --color-bg: var(--neutral-0); --color-bg-subtle: var(--neutral-100); --color-bg-muted: var(--neutral-200); --color-surface: var(--neutral-0); --color-text: var(--neutral-900); --color-text-secondary: var(--neutral-500); --color-text-muted: var(--neutral-400); --color-text-on-brand: #FFFFFF; --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); --color-primary: var(--sel-teal-deep); --color-primary-hover: var(--sel-teal-ink); --color-primary-active: var(--sel-teal-ink); --color-primary-tint: var(--sel-teal-wash); --color-action: var(--sel-black); --color-action-hover: var(--neutral-700); --color-action-active: var(--neutral-700); --color-action-text: var(--sel-white); --color-accent: var(--amber-400); --color-accent-hover: var(--amber-500); --color-accent-text: var(--amber-900); --color-focus-ring: var(--amber-400); /* The translucent halo behind a focused field. An rgba() literal cannot reference a token, so this is the one place the teal is written out. */ --color-focus-ring-soft: rgba(32, 178, 170, .18); --color-focus-ring-faint: rgba(32, 178, 170, .10); /* Status aliases — components reference these --color-* names. */ --color-success: var(--success); --color-success-bg: var(--success-bg); --color-success-text: var(--success-text); --color-warning: var(--warning); --color-warning-bg: var(--warning-bg); --color-warning-text: var(--warning-text); --color-danger: var(--danger); --color-danger-bg: var(--danger-bg); --color-danger-text: var(--danger-text); --color-info: var(--info); --color-info-bg: var(--info-bg); --color-info-text: var(--info-text); /* Typography Rubik display + Inter body — the same pair the marketing site uses, so a heading looks identical before and after a merchant signs in. Arabic falls back to IBM Plex Sans Arabic in both roles. */ --font-display: 'Rubik', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', 'IBM Plex Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif; --text-display: 2.5rem; /* 40px — marketing hero */ --text-h1: 1.875rem; /* 30px */ --text-h2: 1.5rem; /* 24px */ --text-h3: 1.25rem; /* 20px */ --text-h4: 1.125rem; /* 18px */ --text-body-lg: 1.125rem; /* 18px */ --text-body: 1rem; /* 16px */ --text-sm: 0.875rem; /* 14px */ --text-caption: 0.8125rem; /* 13px */ --text-micro: 0.75rem; /* 12px */ --lh-tight: 1.15; --lh-snug: 1.25; --lh-base: 1.4; --lh-comfy: 1.6; --lh-loose-ar: 1.75; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Spacing — 4px base */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Radius — soft rounded (modern SaaS). Circles keep --radius-full. */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --border-width: 1px; /* Elevation — soft black shadows. Cards are borderless (no 1px outline); separation comes from these shadows alone, so shadow-sm carries real weight. */ --shadow-sm: 0 1px 2px rgba(10,10,10,.04), 0 6px 16px -8px rgba(10,10,10,.10); --shadow-md: 0 2px 6px rgba(10,10,10,.05), 0 18px 40px -20px rgba(10,10,10,.18); --shadow-lg: 0 4px 10px rgba(10,10,10,.05), 0 40px 80px -34px rgba(10,10,10,.26); /* Motion */ --ease-standard: cubic-bezier(.2,0,0,1); --ease-emphasized: cubic-bezier(.2,0,0,1.2); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* Layout */ --container-max: 1200px; --container-wide-max: 1400px; --gutter-mobile: 16px; --gutter-tablet: 24px; --gutter-desktop: 32px; /* Body line-height (set per language below) */ --lh-body: var(--lh-comfy); } /* Arabic body uses looser line-height — Arabic needs more vertical room. */ :root[lang="ar"], [dir="rtl"] { --lh-body: var(--lh-loose-ar); } /* Dark mode — dashboard only, opt-in via [data-theme="dark"] on . Neutral charcoal; teal accent stays the highlight. */ [data-theme="dark"] { --color-bg: #0A0A0A; --color-bg-subtle: #171717; --color-bg-muted: #262626; --color-surface: #141414; --color-border: #2E2E2E; --color-border-strong: #404040; --color-text: #FAFAFA; --color-text-secondary: #B0B0B0; --color-text-muted: #808080; --color-primary: #FFFFFF; --color-primary-hover: #E5E5E5; --color-primary-active: #D1D1D1; --color-primary-tint: rgba(255,255,255,.10); --color-action: #FFFFFF; --color-action-hover: #E5E5E5; --color-action-active: #D1D1D1; --color-action-text: #0A0A0A; --color-accent: var(--amber-400); --color-focus-ring: var(--amber-400); /* The translucent halo behind a focused field. An rgba() literal cannot reference a token, so this is the one place the teal is written out. */ --color-focus-ring-soft: rgba(32, 178, 170, .18); --color-focus-ring-faint: rgba(32, 178, 170, .10); }