/* ============================================================================ KIBO DESIGN TOKENS — TaTEDO Structure matches tarehe's modernist KiboFrame system (sharp corners, RGB channel tokens, neutral-ink shadows, Archivo display type, tarehe layout metrics) so the component/section CSS ports cleanly. ONLY the colour tokens carry TaTEDO's brand — deep teal + amber. Swapping the brand means editing the "Brand" and RGB-channel blocks below; everything else is design system. Legacy TaTEDO-only aliases are preserved at the very end so any other module still referencing them keeps resolving without churn. ============================================================================ */ :root { /* ── Brand ──────────────────────────────────────────────────────── */ /* TaTEDO palette — deep teal + amber accent. */ --primary-color: #00674F; /* TaTEDO deep teal — dominant brand */ --primary-light-color: #0A9B85; /* Mid-teal (gradient / hover) */ --primary-dark-color: #003d2e; /* Teal-dark (active) */ --secondary-color: #00a86b; /* Lighter green — supporting */ --accent-color: #FFB300; /* Amber — CTA / highlight */ --accent-dark-color: #cc8f00; /* Amber-dark */ --neutral-color: #1e3a33; /* Deep teal text tone */ --gradient-match-color: #11674F; /* Teal gradient end */ /* RGB channels — for alpha compositing via rgba(var(--x-rgb), α) so tinted overlays reference the brand token, never a literal. */ --primary-rgb: 0, 103, 79; /* teal */ --secondary-rgb: 0, 168, 107; /* green */ --accent-rgb: 255, 179, 0; /* amber */ --white-rgb: 255, 255, 255; --ink-rgb: 15, 35, 26; /* teal-dark shadow ground */ /* Tinted brand surfaces (teal / green / amber tints over white) */ --primary-soft: #e6f3ef; /* teal-tint light */ --primary-soft-2: #f0f8f5; /* teal-tint lighter */ --secondary-soft: #e6f7ef; /* green-tint (active pills) */ --accent-soft: #fff4d6; /* amber-tint */ /* ── Status ─────────────────────────────────────────────────────── */ --success-color: #22C55E; --success-dark: #15803d; --success-soft: #e7f7ec; --success-rgb: 34, 197, 94; --warning-color: #F59E0B; --warning-dark: #b45309; --warning-soft: #fef3c7; --warning-rgb: 245, 158, 11; --danger-color: #DC2626; --danger-dark: #b91c1c; --danger-soft: #fee2e2; --danger-rgb: 220, 38, 38; --info-color: #0891b2; --info-dark: #0e7490; --info-soft: #e0f2fe; --info-rgb: 8, 145, 178; /* ── Surfaces ───────────────────────────────────────────────────── */ --white-color: #ffffff; --light-color: #f5f8f7; /* light surface */ --surface-0: #f7f9fc; /* page background */ --surface-1: #ffffff; /* cards, panels */ --surface-2: #f8fafc; /* subtle fills (bg->surface step) */ --surface-3: #f1f5f9; /* dividers, hover fills */ --surface-inv: #003d2e; /* dark surfaces (sidebar) — teal-dark */ --bg-light: #f8f9fa; --bg-white: #ffffff; --bg-gray: #f8f9fa; --bg-dark: #0f231a; /* teal-black */ /* ── Text ───────────────────────────────────────────────────────── */ --text-strong: #0f231a; /* page titles */ --text-dark: #0f231a; /* body */ --text-default: #334155; /* secondary body */ --text-secondary: #4a5568; --text-muted: #718096; /* captions, helper */ --text-subtle: #94a3b8; /* placeholders, faint */ --text-light: #f8f9fa; --text-accent: #cc8f00; /* amber-dark reads well against white */ --text-inverted: #ffffff; /* ── Borders ────────────────────────────────────────────────────── */ --border-color: #e2e8f0; --border-strong: #cbd5e1; --border-light: #f1f5f9; --border-focus: var(--primary-color); /* teal focus */ /* ── Gradients (kept for legacy; prefer solid surfaces in modern UI) */ --primary-gradient: linear-gradient(135deg, var(--primary-dark-color) 0%, var(--primary-light-color) 100%); --accent-gradient: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark-color) 100%); --success-gradient: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%); --warning-gradient: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%); --danger-gradient: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%); /* ── Spacing (4px base scale) ───────────────────────────────────── */ --spacing-0: 0; --spacing-px: 1px; --spacing-xs: 0.25rem; /* 4 */ --spacing-sm: 0.5rem; /* 8 */ --spacing-md: 1rem; /* 16 */ --spacing-lg: 1.5rem; /* 24 */ --spacing-xl: 2rem; /* 32 */ --spacing-2xl: 3rem; /* 48 */ --spacing-3xl: 4rem; /* 64 */ /* ── Radii ──────────────────────────────────────────────────────── */ /* Modernist (tarehe): sharp corners everywhere. All rectangular radii = 0. --border-radius-pill stays a real pill so genuinely circular things (avatars, status dots, toggles) remain round. */ --border-radius-xs: 0; --border-radius-sm: 0; --border-radius: 0; --border-radius-md: 0; --border-radius-lg: 0; --border-radius-xl: 0; --border-radius-2xl: 0; --border-radius-pill: 9999px; /* ── Shadows (neutral ink ground, composited from --ink-rgb) ────── */ --shadow-xs: 0 1px 2px rgba(var(--ink-rgb), 0.06); --shadow-soft: 0 1px 3px rgba(var(--ink-rgb), 0.06), 0 1px 2px rgba(var(--ink-rgb), 0.04); --shadow-sm: 0 2px 4px rgba(var(--ink-rgb), 0.06), 0 1px 2px rgba(var(--ink-rgb), 0.04); --shadow-medium: 0 8px 24px rgba(var(--ink-rgb), 0.08), 0 2px 6px rgba(var(--ink-rgb), 0.04); --shadow-md: 0 8px 24px rgba(var(--ink-rgb), 0.12); /* alias */ --shadow-lg: 0 12px 32px rgba(var(--ink-rgb), 0.10), 0 4px 8px rgba(var(--ink-rgb), 0.06); --shadow-hard: 0 24px 48px rgba(var(--ink-rgb), 0.18), 0 6px 12px rgba(var(--ink-rgb), 0.08); --shadow-color: rgba(var(--ink-rgb), 0.1); /* Focus ring */ --focus-ring-color: rgba(var(--primary-rgb), 0.28); /* TaTEDO teal */ --focus-ring: 0 0 0 3px var(--focus-ring-color); --focus-ring-danger: 0 0 0 3px rgba(var(--danger-rgb), 0.28); --focus-ring-success: 0 0 0 3px rgba(var(--success-rgb), 0.28); --focus-ring-warning: 0 0 0 3px rgba(var(--warning-rgb), 0.28); /* Semantic surfaces — selection, hover, ring-overlays */ --ring-overlay-soft: rgba(var(--ink-rgb), 0.04); --ring-overlay-med: rgba(var(--ink-rgb), 0.08); --selection-bg: rgba(var(--primary-rgb), 0.16); --selection-color: var(--primary-color); /* ── Motion ─────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --transition-fast: all 0.15s var(--ease-out); --transition-normal: all 0.22s var(--ease-out); --transition-slow: all 0.4s var(--ease-out); --hover-transform: translateY(-1px); /* ── Layout (tarehe metrics) ────────────────────────────────────── */ --sidebar-width: 264px; --sidebar-collapsed: 76px; --header-height: 60px; --container-max-width: 1280px; --container-full-width: 100%; --content-padding: var(--spacing-xl); --content-gutter: var(--spacing-lg); /* ── Typography ─────────────────────────────────────────────────── */ /* UI + display font — Archivo (loaded in templates/master.blade.php). */ --font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-display:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --font-size-xs: 0.75rem; /* 12 */ --font-size-sm: 0.8125rem; /* 13 */ --font-size-md: 0.875rem; /* 14 */ --font-size-base: 0.9375rem; /* 15 — body */ --font-size-lg: 1rem; /* 16 */ --font-size-xl: 1.125rem; /* 18 */ --font-size-2xl: 1.375rem; /* 22 */ --font-size-3xl: 1.75rem; /* 28 */ --font-size-4xl: 2.125rem; /* 34 */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Modernist heading weight */ --line-height-tight: 1.2; --line-height-snug: 1.375; --line-height-normal: 1.55; --line-height-relaxed: 1.7; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; /* ── Z-index ────────────────────────────────────────────────────── */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-offcanvas: 1035; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; /* ── Legacy TaTEDO-only aliases ─────────────────────────────────── */ /* Preserved so any module/view still referencing these keeps resolving. Prefer the tokens above in new CSS. */ --off-white-color: rgba(245,245,245,0.9); --dark-color: #0f231a; --text-light-color: #f8f9fa; /* Display/heading font — public marketing pages load Sora and reference --font-head; admin/user pages fall through to Archivo. */ --font-head: 'Sora', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Margin/Padding aliases (legacy) */ --margin-xs: 0.25rem; --margin-sm: 0.5rem; --margin-md: 1rem; --margin-lg: 1.5rem; --margin-xl: 2rem; --margin-2xl: 3rem; --padding-xs: 0.25rem; --padding-sm: 0.5rem; --padding-md: 1rem; --padding-lg: 1.5rem; --padding-xl: 2rem; --padding-2xl: 3rem; /* Hover fill (legacy) */ --hover-bg: rgba(0, 103, 79, 0.08); }