/* ========================================================================== CİBİM — design tokens The ONLY file containing raw colour / size values. Everything else references these custom properties. A tenant reskin overrides this layer and nothing else. ========================================================================== */ :root { /* ---- brand cyan ------------------------------------------------------ Anchored on #00B8FF, pixel-sampled from the real cib mark. Contrast vs white / vs --ink-900 is noted per step. Cyan is a SURFACE colour: never set body text below --cyan-800 on a light background, and never put white text on --cyan-500 (2.26:1 — fails AA). */ --cyan-50: #F0FBFF; /* 1.05 / 14.76 */ --cyan-100: #D9F4FF; /* 1.15 / 13.57 */ --cyan-200: #ADE8FF; /* 1.33 / 11.66 */ --cyan-300: #6BD6FF; /* 1.66 / 9.39 */ --cyan-400: #2EC5FF; /* 1.99 / 7.80 */ --cyan-500: #00B8FF; /* 2.26 / 6.88 <- brand */ --cyan-600: #00A2E3; /* 2.89 / 5.38 */ --cyan-700: #008AC4; /* 3.87 / 4.02 large text only */ --cyan-800: #00608B; /* 6.89 / 2.25 lowest cyan safe for body text */ --cyan-900: #003750; /* 12.63 / 1.23 */ --brand-gradient: linear-gradient(180deg, #00C8FF 0%, #00A4FF 100%); --brand-gradient-diag: linear-gradient(145deg, #00C8FF 0%, #0090E8 100%); /* ---- neutrals: cool, tuned to sit beside cyan ---- */ --ink-900: #0A2540; --ink-800: #16324F; --ink-700: #2B4763; --ink-600: #47617C; --ink-500: #6B8299; --ink-400: #9AACBE; --ink-300: #C4D0DC; --ink-200: #DFE6EE; --ink-100: #EEF2F7; --ink-50: #F7FAFC; --white: #FFFFFF; /* ---- semantic ---- */ --success-fg: #0E6E4E; --success-bg: #E6F6EF; --success-line: #9BD9C1; --warning-fg: #8A5A00; --warning-bg: #FFF6E3; --warning-line: #F0CE87; --danger-fg: #A32020; --danger-bg: #FDECEC; --danger-line: #F0AEAE; --info-fg: #00608B; --info-bg: #E9F7FE; --info-line: #9BD9F2; /* "being confirmed" — outcome not yet known. Deliberately NOT danger. */ --pending-fg: #5B4B8A; --pending-bg: #F1EDFB; --pending-line: #C3B4E8; /* ---- roles ---- */ --bg-app: var(--ink-50); --bg-surface: var(--white); --bg-sunken: var(--ink-100); --bg-inverse: var(--ink-900); --text: var(--ink-900); --text-muted: var(--ink-600); --text-subtle: var(--ink-500); --text-inverse: var(--white); --text-on-brand: var(--ink-900); /* text on cyan fills — never white */ --border: var(--ink-200); --border-strong: var(--ink-300); --accent: var(--cyan-500); --accent-hover: var(--cyan-400); --accent-active: var(--cyan-600); --accent-text: var(--cyan-800); /* cyan you may write in */ --accent-soft: var(--cyan-50); --focus-ring: 0 0 0 3px rgba(0, 184, 255, .45); --scrim: rgba(10, 37, 64, .55); /* ---- type ---- */ --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --t-display: 700 40px/44px var(--font-sans); --t-h1: 700 30px/36px var(--font-sans); --t-h2: 600 22px/28px var(--font-sans); --t-h3: 600 18px/24px var(--font-sans); --t-body-lg: 400 16px/24px var(--font-sans); --t-body: 400 14px/21px var(--font-sans); --t-sm: 400 13px/19px var(--font-sans); --t-xs: 500 12px/16px var(--font-sans); /* ---- space (4px grid) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* ---- radius ---- */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* ---- elevation ---- */ --e-1: 0 1px 2px rgba(10,37,64,.06), 0 1px 3px rgba(10,37,64,.08); --e-2: 0 2px 6px rgba(10,37,64,.07), 0 6px 16px rgba(10,37,64,.07); --e-3: 0 8px 28px rgba(10,37,64,.12); /* ---- motion ---- */ --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms; --ease: cubic-bezier(.2,.6,.2,1); /* ---- layout ---- */ --sidebar-w: 248px; --topbar-h: 64px; --content-max: 1200px; } /* ========================================================================== Dark theme. Only token values are redefined — never component rules. Defined for BOTH the system preference and the explicit toggle so the control wins in both directions. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-app: #071726; --bg-surface: #0E2437; --bg-sunken: #0A1D2E; --bg-inverse: #DFE6EE; --text: #E8F0F7; --text-muted: #9AACBE; --text-subtle: #6B8299; --text-inverse: #0A2540; --border: #1E3B54; --border-strong: #2B4763; --accent: var(--cyan-500); --accent-hover: var(--cyan-400); --accent-active: var(--cyan-600); --accent-text: var(--cyan-300); /* on dark, light cyan is legible */ --accent-soft: #06283C; --success-fg: #6FD3AC; --success-bg: #06291F; --success-line: #14513C; --warning-fg: #F3C46B; --warning-bg: #2B1F05; --warning-line: #5C4413; --danger-fg: #F19A9A; --danger-bg: #2C0F0F; --danger-line: #5E2222; --info-fg: #7FD3F5; --info-bg: #05283A; --info-line: #14506B; --pending-fg: #C3B4E8; --pending-bg: #1B1533; --pending-line: #3A2F63; --e-1: 0 1px 2px rgba(0,0,0,.36), 0 1px 3px rgba(0,0,0,.30); --e-2: 0 2px 6px rgba(0,0,0,.40), 0 6px 16px rgba(0,0,0,.34); --e-3: 0 8px 28px rgba(0,0,0,.52); } } :root[data-theme="dark"] { --bg-app: #071726; --bg-surface: #0E2437; --bg-sunken: #0A1D2E; --bg-inverse: #DFE6EE; --text: #E8F0F7; --text-muted: #9AACBE; --text-subtle: #6B8299; --text-inverse: #0A2540; --border: #1E3B54; --border-strong: #2B4763; --accent-text: var(--cyan-300); --accent-soft: #06283C; --success-fg: #6FD3AC; --success-bg: #06291F; --success-line: #14513C; --warning-fg: #F3C46B; --warning-bg: #2B1F05; --warning-line: #5C4413; --danger-fg: #F19A9A; --danger-bg: #2C0F0F; --danger-line: #5E2222; --info-fg: #7FD3F5; --info-bg: #05283A; --info-line: #14506B; --pending-fg: #C3B4E8; --pending-bg: #1B1533; --pending-line: #3A2F63; --e-1: 0 1px 2px rgba(0,0,0,.36), 0 1px 3px rgba(0,0,0,.30); --e-2: 0 2px 6px rgba(0,0,0,.40), 0 6px 16px rgba(0,0,0,.34); --e-3: 0 8px 28px rgba(0,0,0,.52); --scrim: rgba(0, 8, 16, .68); }