/* ============================================================ Respoud Yazılım Ticaret Ltd. Şti. — Design System Brand: Respoud · Product: RCloud (WMS-RFID Web Portal) ============================================================ Foundational tokens for color, type, spacing, radius, shadow and motion — used across every Respoud / RCloud UI surface. Direction: iOS-inspired. Vibrant Respoud Blue primary, multi-color category palette for app-icon tiles, continuous squircle radii, soft elevations. ── TYPE STACKS ──────────────────────────────────────────── Four stacks ship simultaneously. Default is **geist** (closest to SF Pro). Switch by setting `data-font-stack` on : ← default ← humanist warmth ← enterprise + condensed ← legacy DM Sans Each stack swaps --font-display / --font-body / --font-mono / --font-brand atomically. All other tokens stay the same. ============================================================ */ /* Geist + Geist Mono — primary, self-hosted from /fonts (uploaded by brand) */ @font-face { font-family: "Geist"; font-style: normal; font-weight: 100; font-display: swap; src: url("/fonts/Geist-Thin.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 200; font-display: swap; src: url("/fonts/Geist-ExtraLight.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/Geist-Light.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Geist-Regular.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/Geist-Medium.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/Geist-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Geist-Bold.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/Geist-ExtraBold.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/Geist-Black.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: italic; font-weight: 100; font-display: swap; src: url("/fonts/Geist-ThinItalic.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: italic; font-weight: 200; font-display: swap; src: url("/fonts/Geist-ExtraLightItalic.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/Geist-LightItalic.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/Geist-Italic.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/Geist-MediumItalic.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: italic; font-weight: 600; font-display: swap; src: url("/fonts/Geist-SemiBoldItalic.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/Geist-BoldItalic.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/Geist-ExtraBoldItalic.ttf") format("truetype"); } @font-face { font-family: "Geist"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/Geist-BlackItalic.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100; font-display: swap; src: url("/fonts/GeistMono-Thin.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 200; font-display: swap; src: url("/fonts/GeistMono-ExtraLight.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/GeistMono-Light.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/GeistMono-Regular.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/GeistMono-Medium.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/GeistMono-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/GeistMono-Bold.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/GeistMono-ExtraBold.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/GeistMono-Black.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: italic; font-weight: 100; font-display: swap; src: url("/fonts/GeistMono-ThinItalic.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: italic; font-weight: 200; font-display: swap; src: url("/fonts/GeistMono-ExtraLightItalic.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/GeistMono-LightItalic.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/GeistMono-Italic.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/GeistMono-MediumItalic.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: italic; font-weight: 600; font-display: swap; src: url("/fonts/GeistMono-SemiBoldItalic.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/GeistMono-BoldItalic.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/GeistMono-ExtraBoldItalic.ttf") format("truetype"); } @font-face { font-family: "Geist Mono"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/GeistMono-BlackItalic.ttf") format("truetype"); } /* IBM Plex Sans + Plex Condensed + Plex Mono — enterprise density option */ /* General Sans — humanist warmth option (Fontshare; not on Google Fonts). Explicit @font-face so the source is resolvable (CDN woff2/woff), rather than hidden behind a remote @import the toolchain can't introspect. */ /* DM Sans + JetBrains Mono — legacy stack, kept for comparison */ :root { /* ─── BRAND ───────────────────────────────────────────── */ --respoud-blue: #1272FC; /* primary, official logo */ --respoud-blue-600: #0B5FE0; --respoud-blue-700: #084DBF; --respoud-blue-400: #4D94FF; --respoud-blue-200: #B7D4FF; --respoud-blue-100: #DCE9FF; --respoud-blue-50: #EEF4FF; --respoud-blue-tint: rgba(18,114,252,0.10); --respoud-blue-glow: rgba(18,114,252,0.28); /* ─── NEUTRAL (warm-cool zinc, iOS-like) ─────────────── */ --neutral-0: #FFFFFF; --neutral-50: #F7F8FA; --neutral-100: #F1F3F6; --neutral-150: #E7EAF0; --neutral-200: #DBDFE7; --neutral-300: #C3C9D4; --neutral-400: #9AA1AE; --neutral-500: #6E7585; --neutral-600: #4C5363; --neutral-700: #353B49; --neutral-800: #1F2330; --neutral-900: #11141C; --neutral-950: #07090F; /* ─── SEMANTIC SURFACES ──────────────────────────────── */ --bg-app: var(--neutral-50); --bg-card: var(--neutral-0); --bg-elevated: var(--neutral-0); --bg-sunken: var(--neutral-100); --bg-overlay: rgba(17, 20, 28, 0.45); --fg-1: var(--neutral-900); /* headings */ --fg-2: var(--neutral-700); /* body */ --fg-3: var(--neutral-500); /* muted */ --fg-4: var(--neutral-400); /* placeholder, hint */ --fg-on-primary: #FFFFFF; --fg-on-color: #FFFFFF; --border-1: var(--neutral-200); /* default border */ --border-2: var(--neutral-150); /* subtle */ --border-3: var(--neutral-100); /* hairline */ --border-focus: var(--respoud-blue); /* ─── SEMANTIC STATE COLORS ──────────────────────────── */ --color-primary: var(--respoud-blue); --color-primary-soft: var(--respoud-blue-tint); --color-success: #2DBE60; --color-success-soft:rgba(45,190,96,0.12); --color-warning: #F5A524; --color-warning-soft:rgba(245,165,36,0.14); --color-danger: #FF453A; --color-danger-soft:rgba(255,69,58,0.12); --color-info: #32ADE6; --color-info-soft: rgba(50,173,230,0.12); /* ─── iOS-INSPIRED CATEGORY PALETTE ─────────────────── */ /* Used for multi-color icon tiles (gradient duo). Each category has a `from` and `to` for the squircle tile. */ --cat-blue-from: #2A8BFF; --cat-blue-to: #1264E0; --cat-indigo-from: #6B7CFF; --cat-indigo-to: #4F46E5; --cat-purple-from: #B660FF; --cat-purple-to: #7C3AED; --cat-pink-from: #FF5E8F; --cat-pink-to: #DB2777; --cat-red-from: #FF6B6B; --cat-red-to: #E11D48; --cat-orange-from: #FFA84D; --cat-orange-to: #F97316; --cat-amber-from: #FFC93D; --cat-amber-to: #F59E0B; --cat-green-from: #4ED57F; --cat-green-to: #16A34A; --cat-teal-from: #46D6CC; --cat-teal-to: #0D9488; --cat-cyan-from: #4DC8F0; --cat-cyan-to: #0891B2; --cat-gray-from: #8C94A4; --cat-gray-to: #4C5363; /* ─── ELEVATION (soft, iOS feel) ─────────────────────── */ --shadow-xs: 0 1px 0 rgba(17,20,28,0.04), 0 1px 2px rgba(17,20,28,0.04); --shadow-sm: 0 1px 2px rgba(17,20,28,0.05), 0 2px 6px rgba(17,20,28,0.05); --shadow-md: 0 2px 4px rgba(17,20,28,0.04), 0 8px 20px rgba(17,20,28,0.08); --shadow-lg: 0 4px 8px rgba(17,20,28,0.05), 0 20px 40px rgba(17,20,28,0.12); --shadow-xl: 0 8px 16px rgba(17,20,28,0.06), 0 32px 64px rgba(17,20,28,0.18); --shadow-focus: 0 0 0 4px rgba(18,114,252,0.22); --shadow-tile: 0 1px 1px rgba(17,20,28,0.06), 0 4px 10px rgba(17,20,28,0.10), inset 0 1px 0 rgba(255,255,255,0.25); /* ─── RADIUS (continuous, iOS squircle vibe) ─────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; /* inputs, buttons */ --radius-lg: 14px; /* cards */ --radius-xl: 20px; /* large containers */ --radius-2xl: 28px; /* feature cards */ --radius-tile: 22%; /* iOS squircle ratio for icon tiles */ --radius-pill: 999px; /* ─── SPACING SCALE (4px base, iOS comfy) ────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 80px; /* ─── TYPOGRAPHY ─────────────────────────────────────── */ /* Default stack = Geist. Override with [data-font-stack] on . */ --font-display: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Rounded", system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --font-body: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-brand: "Geist", -apple-system, system-ui, sans-serif; /* Condensed slot — only Plex stack ships a real condensed. Other stacks fall back to the regular body family. */ --font-condensed: var(--font-body); /* fluid-ish type scale — large headings get optical sizing */ --text-display: 56px; --text-h1: 40px; --text-h2: 30px; --text-h3: 24px; --text-h4: 18px; --text-h5: 15px; --text-h6: 13px; --text-body: 14px; --text-body-lg: 16px; --text-small: 12.5px; --text-micro: 11px; --lh-tight: 1.08; /* @kind font */ --lh-snug: 1.2; /* @kind font */ --lh-normal: 1.45; /* @kind font */ --lh-relaxed: 1.6; /* @kind font */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.06em; /* ─── MOTION ─────────────────────────────────────────── */ --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-spring: cubic-bezier(0.5, 1.6, 0.4, 0.9); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ /* ─── LAYOUT ─────────────────────────────────────────── */ --sidebar-w: 260px; --sidebar-w-rail: 72px; --topbar-h: 60px; --content-pad: 24px; /* ─── SEMANTIC HOVER / TOPBAR / INPUT (theme-switching) ─ */ --bg-hover: var(--neutral-100); /* nav/icon-btn hover surface */ --bg-input: var(--neutral-50); /* input rest background */ --bg-topbar: rgba(255,255,255,0.78); /* glassy topbar */ --kbd-bg: var(--neutral-100); } /* ============================================================ TYPE STACK SWITCHING Set data-font-stack on to swap families atomically. ============================================================ */ /* Geist — explicit (matches default :root, but provided for clarity) */ [data-font-stack="geist"] { --font-display: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Rounded", system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --font-body: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-brand: "Geist", -apple-system, system-ui, sans-serif; --font-condensed: "Geist", -apple-system, system-ui, sans-serif; } /* General Sans — humanist warmth */ [data-font-stack="general"] { --font-display: "General Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --font-body: "General Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-brand: "General Sans", -apple-system, system-ui, sans-serif; --font-condensed: "General Sans", -apple-system, system-ui, sans-serif; } /* IBM Plex — enterprise + condensed for dense ops tables */ [data-font-stack="plex"] { --font-display: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-brand: "IBM Plex Sans", -apple-system, system-ui, sans-serif; --font-condensed: "IBM Plex Sans Condensed", "IBM Plex Sans", -apple-system, system-ui, sans-serif; } /* DM Sans — legacy (pre-Geist) */ [data-font-stack="dm"] { --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Rounded", system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-brand: "DM Sans", -apple-system, system-ui, sans-serif; --font-condensed: "DM Sans", -apple-system, system-ui, sans-serif; } /* Dark mode (iOS-style: deep neutrals, slightly cooler) */ [data-theme="dark"] { --bg-app: #0B0D14; --bg-card: #151823; --bg-elevated: #1A1E2B; --bg-sunken: #0E1118; --bg-overlay: rgba(0,0,0,0.6); --fg-1: #F4F6FB; --fg-2: #C9CFDB; --fg-3: #8A91A1; --fg-4: #5E6478; --border-1: #262B3B; --border-2: #1F2433; --border-3: #181C29; --respoud-blue-tint: rgba(77,148,255,0.16); --shadow-xs: 0 1px 0 rgba(0,0,0,0.4); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3); --shadow-md: 0 2px 4px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.45); --shadow-lg: 0 4px 8px rgba(0,0,0,0.4), 0 20px 40px rgba(0,0,0,0.55); --shadow-tile: 0 1px 1px rgba(0,0,0,0.4), 0 6px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.10); /* dark-mode overrides for hover / input / topbar */ --bg-hover: #1F2433; --bg-input: #1A1E2B; --bg-topbar: rgba(15, 18, 28, 0.72); --kbd-bg: #1F2433; } /* ============================================================ Semantic class helpers — drop straight into HTML ============================================================ */ html, body { font-family: var(--font-body); color: var(--fg-2); background: var(--bg-app); } .h-display { font: 700 var(--text-display)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .h1 { font: 700 var(--text-h1)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .h2 { font: 700 var(--text-h2)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-snug); color: var(--fg-1); } .h3 { font: 600 var(--text-h3)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-snug); color: var(--fg-1); } .h4 { font: 600 var(--text-h4)/var(--lh-snug) var(--font-display); color: var(--fg-1); } .h5 { font: 600 var(--text-h5)/var(--lh-normal) var(--font-body); color: var(--fg-1); } .h6 { font: 600 var(--text-h6)/var(--lh-normal) var(--font-body); color: var(--fg-1); } .p, p { font-size: var(--text-body); line-height: var(--lh-normal); color: var(--fg-2); } .p-lg { font-size: var(--text-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); } .p-sm { font-size: var(--text-small); line-height: var(--lh-normal); color: var(--fg-3); } .code, code { font-family: var(--font-mono); font-size: 12.5px; } .eyebrow { font: 600 var(--text-micro)/1 var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); } .tnum { font-variant-numeric: tabular-nums; } /* base reset for previews */ * { box-sizing: border-box; }