/* ========================================================================== GoldenBearing Design System — Design Tokens (GB-UI-01) ========================================================================== Single source of truth for every visual primitive (color, type, space, radius, shadow, motion) used by the component library in components.css. Components MUST consume these custom properties — never a literal color, px value, or duration — so that (a) a future rebrand only touches this file, and (b) the [data-theme="dark"] block below is enough to re-theme every component with zero component-level changes. Load order: tokens.css → base.css → rtl.css → components.css (see index.css, which @imports all four in that order). ========================================================================== */ :root { color-scheme: light; /* ---- Brand palette (GoldenBearing identity — do not rename) -------- */ --gb-brand-primary: #F59E0B; /* Golden Orange */ --gb-brand-dark: #343A40; /* Charcoal Gray */ --gb-brand-secondary: #8A8F98; /* Steel Gray */ --gb-brand-accent: #123B5D; /* Deep Blue */ --gb-brand-light: #F3F4F6; --gb-brand-white: #FFFFFF; /* ---- Neutral ramp ----------------------------------------------------- UX redesign («میز کار روشن»): the ramp was a cool blue-grey scale (#212529 → #FAFAFB) inherited from the Bootstrap-era styling. It is now WARM — every step carries a little of the brand's amber, so paper reads as paper and not as a screen. Hues were picked so each step keeps roughly the LIGHTNESS of the value it replaces; that is what lets the swap re-theme ~1000 token references without re-checking every contrast pair one by one. 900/800 remain the darkest inks, 500 is the mid grey the brand's steel maps onto, 100/50 are the paper. --gb-brand-dark is NOT in this ramp any more (it is the charcoal of the logo and of dark surfaces, not a text grey), which is why 800 is now its own value. */ --gb-gray-900: #23201A; /* warm ink — body text */ --gb-gray-800: #353026; --gb-gray-700: #5C574C; --gb-gray-600: #6E6858; --gb-gray-500: #8F887A; --gb-gray-400: #B3AC9C; --gb-gray-300: #E1DCCE; --gb-gray-200: #ECE8DD; --gb-gray-100: #F4F1EA; --gb-gray-50: #FBFAF6; /* ---- Primary (Golden Orange) ---------------------------------------- */ --gb-primary: var(--gb-brand-primary); --gb-primary-hover: #D98A05; --gb-primary-active: #B87604; --gb-primary-subtle: #FDF0D6; --gb-primary-subtle-border: #FBDFA8; --gb-on-primary: var(--gb-brand-dark); /* body text sits on orange better than white */ /* ---- Accent (Deep Blue) --------------------------------------------- */ --gb-accent: var(--gb-brand-accent); --gb-accent-hover: #0D2E49; --gb-accent-active: #092337; --gb-accent-subtle: #E9F0F5; --gb-accent-subtle-border: #BFD3E1; --gb-on-accent: var(--gb-brand-white); /* ---- Secondary (Steel Gray) ------------------------------------------ */ --gb-secondary: var(--gb-brand-secondary); --gb-secondary-hover: #767B84; --gb-secondary-subtle: var(--gb-gray-100); --gb-on-secondary: var(--gb-brand-white); /* ---- Semantic feedback colors ----------------------------------------- */ /* UX hardening pass: was #1E8A4C — about 3.9:1 as `.gb-badge--success` / `.gb-alert--success` text on `--gb-success-subtle`, under AA's 4.5:1. Same hue, two steps darker, ~5.4:1. Its other uses (timeline dot, status-card bar) are solid marks on a light surface. */ --gb-success: #15703C; --gb-success-hover: #0F5A2F; --gb-success-subtle: #E4F3EA; --gb-success-subtle-border: #B7E3C6; --gb-on-success: var(--gb-brand-white); --gb-danger: #DC2626; --gb-danger-hover: #B91C1C; --gb-danger-subtle: #FCEBE9; --gb-danger-subtle-border: #F5BFBF; --gb-on-danger: var(--gb-brand-white); /* UX hardening pass: was #D97706, which is used as the TEXT color of `.gb-badge--warning` / `.gb-alert--warning` on `--gb-warning-subtle` (#FDF3E0) — about 3.1:1, under WCAG AA's 4.5:1 for the 12px semibold text those components use. #B45309 keeps the same amber hue and clears 4.5:1. Every other use (`--status-warning` bar, timeline/status dots) is a solid mark on a light surface and reads at least as well darker. */ --gb-warning: #B45309; --gb-warning-hover: #92400E; --gb-warning-subtle: #FDF0D6; --gb-warning-subtle-border: #F3D8A0; /* UX redesign: a status badge's TEXT is deeper than the same status's solid mark. --gb-warning (#B45309) stays the colour of a warning icon, bar or button; this is the ink used on --gb-warning-subtle, where the design's own badges sit. Same split --gb-text-danger already makes for red. */ --gb-text-warning: #8A5A05; --gb-on-warning: var(--gb-brand-dark); --gb-info: var(--gb-brand-accent); --gb-info-hover: var(--gb-accent-hover); --gb-info-subtle: var(--gb-accent-subtle); --gb-info-subtle-border: var(--gb-accent-subtle-border); --gb-on-info: var(--gb-brand-white); /* ---- Surfaces / text / borders (what components actually use) ------ */ /* UX redesign: the page ground is warm paper, a shade lighter than the old --gb-gray-100 alias so cards still separate from it without a border. */ --gb-background: #F6F4EF; --gb-surface: var(--gb-brand-white); --gb-surface-alt: var(--gb-gray-50); /* GB-UI-04 (Theme Engine) requires this exact token name in its validation checklist. Deliberately a live alias to --gb-surface-alt rather than a new physical color: custom-property references resolve at used-value time against whatever is in scope, so a single declaration here is enough to track --gb-surface-alt's own [data-theme="dark"] override below with zero duplication — do not redeclare it in the dark block. */ --gb-surface-secondary: var(--gb-surface-alt); --gb-surface-sunken: #F1EEE5; --gb-overlay: rgba(33, 37, 41, 0.55); --gb-text-primary: var(--gb-gray-900); --gb-text-secondary: var(--gb-gray-700); --gb-text-tertiary: var(--gb-gray-600); --gb-text-disabled: var(--gb-gray-400); --gb-text-inverse: var(--gb-brand-white); --gb-text-link: var(--gb-accent); --gb-text-link-hover: var(--gb-accent-hover); --gb-border: var(--gb-gray-300); --gb-border-strong: var(--gb-gray-500); /* UX hardening pass: split from `--gb-danger` rather than aliasing it. `--gb-danger` (#DC2626) has to stay bright enough to read as a solid destructive BUTTON, but as `.gb-badge--danger` / `.gb-alert--danger` TEXT on `--gb-danger-subtle` it only reached ~4.2:1. This darker red is ~5.6:1 as text; the button keeps `--gb-danger` and is unaffected. The dark block below already overrode this token separately for exactly the same reason. */ --gb-text-danger: #B42318; --gb-border-subtle: var(--gb-gray-200); --gb-focus-ring-color: var(--gb-brand-accent); /* ---- The application sidebar ----------------------------------------- UX redesign («میز کار روشن»): the navigation used to sit on the brand's charcoal in BOTH themes, deliberately, as a fixed dark edge. The redesign reverses that — the sidebar is now the lightest warm surface in the product and reads as part of the same sheet of paper as the content, with the amber reserved for the ONE active item. Consequence, and the reason this note exists: because these are no longer theme-independent, the dark block below now DOES override them. Change one, check the other. Note --gb-sidebar-surface is deliberately lighter than --gb-background: the sidebar is the raised edge, the content well is the recessed middle, and --gb-sidebar-rule is what separates them. */ --gb-sidebar-surface: #FBFAF6; --gb-sidebar-text: #4A4538; --gb-sidebar-text-strong: #23201A; --gb-sidebar-text-muted: #6E6858; --gb-sidebar-text-faint: #8F887A; --gb-sidebar-rule: #ECE8DD; --gb-sidebar-hover: #F3F0E7; --gb-sidebar-active: #FDF0D6; /* The 3px rail on a navigable row. It is deliberately NOT amber: amber appears exactly once per view (the active item, plus the one primary action in the page head), and a rail on every row would spend it twenty times over. Its job is to mark "this row goes somewhere" as a SHAPE, which a warm grey does just as well. The active rail overrides this with --gb-primary. */ --gb-sidebar-mark: #DCD5C6; /* New in the redesign: the active item's ICON and its own text need to be nameable, because on a light ground they are amber-on-tint rather than white-on-charcoal. */ --gb-sidebar-active-text: #23201A; --gb-sidebar-active-icon: #B87604; --gb-sidebar-icon: #8F887A; /* ---- Typography ------------------------------------------------------ */ /* UX redesign («میز کار روشن»): Noto Sans Arabic leads, Vazirmatn stays as the immediate fallback so nothing degrades to Tahoma if the new face fails to load. Both are self-hosted — see base.css. */ --gb-font-family-base: "Noto Sans Arabic", "Vazirmatn", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; --gb-font-family-mono: ui-monospace, SFMono-Regular, "Segoe UI Mono", Consolas, monospace; /* UX Product Redesign (2026-08-18): migrated to the design bundle's own compact 6-step Persian scale (Golden Bearing Components.dc.html, typeScale: 10.5/11.5/12.5/13.5/15/19px) — flagged as a real delta during the Phase 1 audit but never actually applied until now. xs through 2xl map 1:1 onto the design's six named roles (fine-print → page-title); 3xl/4xl are outside the design's stated scale (it never goes past 19px) and are left at their prior values rather than guessed, since they back dashboard/KPI numerals this spec doesn't cover. */ --gb-font-size-xs: 0.65625rem; /* 10.5px — ریزمتن و Audit */ --gb-font-size-sm: 0.71875rem; /* 11.5px — متن کمکی و برچسب */ --gb-font-size-md: 0.78125rem; /* 12.5px — متن اصلی و جدول (base) */ --gb-font-size-lg: 0.84375rem; /* 13.5px — عنوان کارت */ --gb-font-size-xl: 0.9375rem; /* 15px — عنوان بخش */ --gb-font-size-2xl: 1.1875rem; /* 19px — عنوان صفحه */ --gb-font-size-3xl: 1.875rem; /* 30px — خارج از دامنه Type Scale طراحی */ --gb-font-size-4xl: 2.25rem; /* 36px — خارج از دامنه Type Scale طراحی */ --gb-font-weight-regular: 400; --gb-font-weight-medium: 500; --gb-font-weight-semibold: 600; --gb-font-weight-bold: 700; --gb-font-weight-extrabold: 800; /* عنوان صفحه/بخش — Type Scale طراحی */ --gb-line-height-tight: 1.25; --gb-line-height-normal: 1.5; --gb-line-height-relaxed: 1.75; /* ---- Spacing (4px base unit) ------------------------------------------ */ --gb-space-0: 0; --gb-space-1: 0.25rem; /* 4px */ --gb-space-2: 0.5rem; /* 8px */ --gb-space-3: 0.75rem; /* 12px */ --gb-space-4: 1rem; /* 16px */ --gb-space-5: 1.25rem; /* 20px */ --gb-space-6: 1.5rem; /* 24px */ --gb-space-8: 2rem; /* 32px */ --gb-space-10: 2.5rem; /* 40px */ --gb-space-12: 3rem; /* 48px */ --gb-space-16: 4rem; /* 64px */ --gb-space-20: 5rem; /* 80px */ /* ---- Border radius ----------------------------------------------------- */ /* UX redesign: two families, softer than before — controls (badge/input/ button/nav item) at sm–lg, surfaces (card/panel/sheet) at xl. Nothing in the design has a hard 0-radius corner. */ --gb-radius-sm: 6px; --gb-radius-md: 10px; --gb-radius-lg: 12px; --gb-radius-xl: 16px; --gb-radius-full: 999px; /* ---- Elevation (shadows) ------------------------------------------------ */ /* UX redesign: warm-tinted (the old ones were a cool blue-black) and two-layer — a 1px contact shadow plus a wide soft one. That pair is what lets a card sit on warm paper with no border at all, which is the direction's whole premise. */ --gb-shadow-sm: 0 1px 2px rgba(35, 32, 26, 0.05); --gb-shadow-md: 0 1px 2px rgba(35, 32, 26, 0.05), 0 6px 16px rgba(35, 32, 26, 0.06); --gb-shadow-lg: 0 1px 2px rgba(35, 32, 26, 0.05), 0 10px 28px rgba(35, 32, 26, 0.07); --gb-shadow-xl: 0 2px 4px rgba(35, 32, 26, 0.06), 0 20px 44px rgba(35, 32, 26, 0.10); --gb-shadow-focus: 0 0 0 3px rgba(18, 59, 93, 0.20); /* ---- Motion -------------------------------------------------------------- */ --gb-duration-fast: 120ms; --gb-duration-base: 200ms; --gb-duration-slow: 320ms; --gb-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --gb-ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --gb-ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* ---- Layering ------------------------------------------------------------- */ --gb-z-dropdown: 1000; --gb-z-sticky: 1100; --gb-z-modal-backdrop: 1200; --gb-z-modal: 1210; --gb-z-toast: 1300; } /* ========================================================================== Dark theme — activated by . Only tokens whose VALUE needs to change for dark surfaces are overridden; every component keeps referencing the exact same variable name, so no component CSS changes between themes. See design-system.js for the toggle + persistence. ========================================================================== */ [data-theme="dark"] { color-scheme: dark; /* UX redesign: warmed to match the light theme's paper (these were a cool blue-black: #1A1D20/#23272B/#2B3034/#16181A). Same lightness steps, a few points of amber in the hue. */ --gb-background: #1B1917; --gb-surface: #24211E; --gb-surface-alt: #2C2925; --gb-surface-sunken: #171514; --gb-overlay: rgba(0, 0, 0, 0.65); /* The sidebar is a light warm surface in the light theme, so unlike before it MUST be re-declared here — see its note in :root. It stays one step lighter than --gb-background for the same reason it is one step lighter than the paper in light mode. */ --gb-sidebar-surface: #24211E; --gb-sidebar-text: #CFC8BC; --gb-sidebar-text-strong: #F7F4EE; --gb-sidebar-text-muted: #9A9285; --gb-sidebar-text-faint: #7E7669; --gb-sidebar-rule: rgba(255, 255, 255, 0.07); --gb-sidebar-hover: rgba(255, 255, 255, 0.05); --gb-sidebar-active: rgba(245, 158, 11, 0.15); /* The light theme uses a warm grey rail; that same value is a bright stripe on the dark panel, so it inverts to a quiet dark warm grey. Same job (shape = navigable), same quietness, opposite ground. */ --gb-sidebar-mark: #46403A; --gb-sidebar-active-text: #FBE9C6; --gb-sidebar-active-icon: #F5B94B; --gb-sidebar-icon: #9A9285; --gb-text-primary: #F5F2EC; --gb-text-secondary: #B4ADA1; /* Live-verification fix: was #868E96, which is 4.01:1 on the dark card surface — just under AA for the small text it is used for (`.gb-label__optional`, hints). #949CA4 clears 4.5:1 while staying clearly quieter than --gb-text-secondary. */ --gb-text-tertiary: #9B9488; --gb-text-disabled: #635C52; --gb-text-inverse: #212529; --gb-text-link: #4F9CDB; --gb-text-link-hover: #79B7E6; --gb-border: #3D3833; --gb-border-strong: #8A8176; --gb-text-danger: #F87171; --gb-border-subtle: #2C2925; /* UX hardening pass — the semantic trio was missing from this block. `--gb-success` / `--gb-warning` / `--gb-info` are used as the TEXT color of the badge/alert/validation variants, on the `*-subtle` backgrounds this block already darkens. Left at their light-mode values they were unreadable in dark mode, and `--gb-info` was the worst case: it resolves to `--gb-brand-accent` (#123B5D), which this block never overrode, so an info badge rendered dark navy text on the #1B2A35 dark navy `--gb-info-subtle` — effectively invisible. `--gb-text-danger` above already established exactly this pattern; these three complete it. All other uses are small solid marks (timeline/status dots, status-card bars) where a lighter value reads better on a dark surface too. */ --gb-success: #4ADE80; --gb-success-hover: #86EFAC; --gb-warning: #FBBF24; --gb-warning-hover: #FCD34D; --gb-text-warning: #F5C556; --gb-info: #7DB8E8; --gb-info-hover: #A5CFF0; --gb-primary-hover: #FFB238; --gb-primary-active: #FFC463; --gb-primary-subtle: #3A2E14; --gb-primary-subtle-border: #5C480F; --gb-accent: #3D77AD; --gb-accent-hover: #5A8FC0; --gb-accent-active: #78A4CC; --gb-accent-subtle: #1B2A35; --gb-accent-subtle-border: #2C4B5F; --gb-focus-ring-color: var(--gb-brand-primary); --gb-success-subtle: #123322; --gb-success-subtle-border: #1E5236; --gb-danger-subtle: #3A1616; --gb-danger-subtle-border: #5C2323; --gb-warning-subtle: #332405; --gb-warning-subtle-border: #543C0C; --gb-info-subtle: var(--gb-accent-subtle); --gb-info-subtle-border: var(--gb-accent-subtle-border); --gb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --gb-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45); --gb-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.5); --gb-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.55); --gb-shadow-focus: 0 0 0 3px rgba(245, 158, 11, 0.85); } /* Respect the OS preference when the app hasn't set an explicit theme yet (design-system.js sets data-theme as soon as it runs; this covers the brief pre-JS paint and no-JS fallback). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; } }