/* =============================================================================
* tujar-redesign.css — design token layer for the TujarCRM admin
* -----------------------------------------------------------------------------
* TOKENS ONLY. No selectors are styled here. Nothing is wired up yet.
*
* Method is lifted from the Tujar Aqar React project
* src/shared/theme.css (brand ramp via color-mix)
* src/admin/pages/AdminRedesign.css (workspace / component tokens)
* ...but the base color is TujarCRM's OWN existing brand color, not theirs.
*
* React base : --color-primary: #18b368 (green) <-- NOT used
* TujarCRM base: --tc-primary: #9d258f (magenta) <-- used here
*
* #9d258f is already the CRM's action color in ekka.css:
* .btn.btn-primary { background-color:#9d258f }
* .form-control:focus { border-color:#9d258f }
* .modal-header { border-top:2px solid #9d258f }
* .sidebar .nav>li.active>a i { color:#9d258f }
* plus every hover/press state in ui-interactions.css: rgba(157,37,143,*)
*
* Change ONLY --tc-primary to re-theme everything below.
* ============================================================================= */
:root {
/* ---------------------------------------------------------------------------
* 1. BASE
* ------------------------------------------------------------------------- */
--tc-white: #ffffff;
--tc-black: #000000;
/* Neutral text ramp — kept from the Ekka theme so mixes land on familiar grays */
--tc-text: #212529; /* headings / strong body */
--tc-text-secondary: #8a909d; /* Ekka --bs-body-color; muted body */
--tc-text-tertiary: #56606e;
/* Canvas / paper */
--tc-background: #f7f9fc;
--tc-surface: #ffffff;
/* ---------------------------------------------------------------------------
* 2. BRAND RAMP — same formulas as React theme.css, base swapped to #9d258f
*
* React theme.css -> TujarCRM equivalent
* --color-primary-dark mix(P 62%,black) -> --tc-primary-dark
* --color-primary-light mix(P 9%,white) -> --tc-primary-light
* --color-brand-deep mix(P 64%,black) -> --tc-brand-deep
* --color-brand-soft mix(P 8%,white) -> --tc-brand-soft
* --color-brand-faint mix(P 5%,transp)-> --tc-brand-faint
* --color-brand-line mix(P 12%,transp)-> --tc-brand-line
* --color-brand-border mix(P 18%,transp)-> --tc-brand-border
* --color-brand-shadow mix(P 10%,transp)-> --tc-brand-shadow
* --color-brand-shadow-strong mix(P 22%,transp) -> --tc-brand-shadow-strong
* --color-brand-glow mix(P 38%,transp)-> --tc-brand-glow
*
* The ramp has three axes, exactly like the React file:
* - shade (mix with black) : 62% / 64% / 74% / 86% / 88%
* - tint (mix with white) : 3% / 4% / 5% / 7% / 8% / 9% / 14%
* - alpha (mix with transp) : 5% / 10% / 12% / 18% / 22% / 38%
* ------------------------------------------------------------------------- */
--tc-primary: #9d258f; /* rgb(157,37,143) */
--tc-primary-rgb: 157, 37, 143; /* for rgba() fallbacks */
--tc-primary-dark: color-mix(in srgb, var(--tc-primary) 62%, var(--tc-black)); /* ~#611759 */
--tc-primary-light: color-mix(in srgb, var(--tc-primary) 9%, var(--tc-white)); /* ~#f6ebf5 */
--tc-brand-deep: color-mix(in srgb, var(--tc-primary) 64%, var(--tc-black)); /* ~#64185c headings, shadow tint, deep gradients */
--tc-brand: color-mix(in srgb, var(--tc-primary) 88%, var(--tc-black)); /* ~#8a217e */
--tc-brand-soft: color-mix(in srgb, var(--tc-primary) 8%, var(--tc-white)); /* ~#f7eef6 soft fills, chips, pills */
--tc-brand-faint: color-mix(in srgb, var(--tc-primary) 5%, transparent); /* grid lines */
--tc-brand-line: color-mix(in srgb, var(--tc-primary) 12%, transparent); /* hairline separators */
--tc-brand-border: color-mix(in srgb, var(--tc-primary) 18%, transparent); /* visible brand border */
--tc-brand-shadow: color-mix(in srgb, var(--tc-primary) 10%, transparent); /* ambient shadow tint */
--tc-brand-shadow-strong: color-mix(in srgb, var(--tc-primary) 22%, transparent); /* raised shadow tint */
--tc-brand-glow: color-mix(in srgb, var(--tc-primary) 38%, transparent); /* beams / glows */
--tc-accent: #ddaa04; /* Ekka warning gold — the React file's yellow slot (#facc15) */
--tc-on-primary: #ffffff;
--tc-on-accent: #000000;
/* Existing secondary indigo from the Ekka theme (links, checkboxes, range).
Not part of the ramp — exposed so it can be retired or reused deliberately. */
--tc-secondary-indigo: #463086;
/* ---------------------------------------------------------------------------
* 3. STATUS — from ekka.css (Bootstrap validation + button palette)
* ------------------------------------------------------------------------- */
--tc-success: #34c997;
--tc-danger: #ec4a58;
--tc-warning: #ddaa04;
--tc-info: #24c4da;
--tc-success-soft: color-mix(in srgb, var(--tc-success) 12%, var(--tc-white));
--tc-danger-soft: color-mix(in srgb, var(--tc-danger) 12%, var(--tc-white));
--tc-warning-soft: color-mix(in srgb, var(--tc-warning) 14%, var(--tc-white));
--tc-info-soft: color-mix(in srgb, var(--tc-info) 12%, var(--tc-white));
/* ---------------------------------------------------------------------------
* 4. WORKSPACE SURFACES & INK
* (React AdminRedesign.css -> .admin-app scope)
*
* --admin-bg / --admin-canvas mix(P 7%, white)
* --admin-surface #ffffff
* --admin-surface-muted = brand-soft
* --admin-ink mix(P 14%, black)
* --admin-ink-soft mix(P 8%, text-secondary)
* --admin-ink-subtle mix(P 4%, text-secondary)
* ------------------------------------------------------------------------- */
--tc-canvas: color-mix(in srgb, var(--tc-primary) 7%, var(--tc-white)); /* ~#f8f0f7 app background */
--tc-surface-1: #ffffff; /* cards */
--tc-surface-2: color-mix(in srgb, var(--tc-primary) 3%, var(--tc-white)); /* ~#fcf8fc nested rows */
--tc-surface-3: color-mix(in srgb, var(--tc-primary) 5%, var(--tc-white)); /* ~#faf4f9 table wrap */
--tc-surface-muted: var(--tc-brand-soft);
--tc-surface-hover: color-mix(in srgb, var(--tc-primary) 4%, var(--tc-white)); /* ~#fbf6fb row hover */
--tc-surface-head: color-mix(in srgb, var(--tc-primary) 14%, var(--tc-white)); /* ~#f1e0ef table | */
--tc-ink: color-mix(in srgb, var(--tc-primary) 14%, var(--tc-black)); /* ~#160514 near-black, plum-tinted */
--tc-ink-soft: color-mix(in srgb, var(--tc-primary) 8%, var(--tc-text-secondary));
--tc-ink-subtle: color-mix(in srgb, var(--tc-primary) 4%, var(--tc-text-secondary));
--tc-ink-on-brand: #ffffff;
/* ---------------------------------------------------------------------------
* 5. BORDERS
* React derives these against brand-deep, not primary:
* --admin-border mix(brand-deep 17%, transparent)
* --admin-border-soft mix(brand-deep 10%, transparent)
* --admin-border-subtle mix(brand-deep 7%, transparent)
* plus input border mix(brand-deep 20%, transparent)
* ------------------------------------------------------------------------- */
--tc-border: color-mix(in srgb, var(--tc-brand-deep) 17%, transparent);
--tc-border-soft: color-mix(in srgb, var(--tc-brand-deep) 10%, transparent);
--tc-border-subtle: color-mix(in srgb, var(--tc-brand-deep) 7%, transparent);
--tc-border-input: color-mix(in srgb, var(--tc-brand-deep) 20%, transparent);
--tc-border-strong: color-mix(in srgb, var(--tc-primary) 27%, transparent); /* hover / focus outline on cards */
/* ---------------------------------------------------------------------------
* 6. STATE LAYERS (mix with transparent — behave like tinted overlays)
* React: --admin-soft mix(P 5.5%,transp) --admin-soft-2 mix(P 10%,transp)
* ------------------------------------------------------------------------- */
--tc-state-soft: color-mix(in srgb, var(--tc-primary) 5.5%, transparent);
--tc-state-soft-2: color-mix(in srgb, var(--tc-primary) 10%, transparent);
--tc-state-hover: color-mix(in srgb, var(--tc-primary) 8%, transparent);
--tc-state-selected: color-mix(in srgb, var(--tc-primary) 12%, transparent);
--tc-state-pressed: color-mix(in srgb, var(--tc-primary) 16%, transparent);
/* Signature gradients (start -> end), same stops as the React file */
--tc-grad-active: linear-gradient(135deg,
color-mix(in srgb, var(--tc-primary) 88%, var(--tc-white)),
color-mix(in srgb, var(--tc-primary) 86%, var(--tc-black))); /* active nav item */
--tc-grad-primary: linear-gradient(135deg,
color-mix(in srgb, var(--tc-primary) 90%, var(--tc-white)),
color-mix(in srgb, var(--tc-primary) 74%, var(--tc-black))); /* primary button */
--tc-grad-header: linear-gradient(125deg,
color-mix(in srgb, var(--tc-primary) 48%, var(--tc-black)),
var(--tc-brand-deep) 58%,
color-mix(in srgb, var(--tc-primary) 87%, var(--tc-black))); /* topbar / drawer head */
/* ---------------------------------------------------------------------------
* 7. RADIUS
* The React design uses a "clipped corner" motif: three round corners
* plus one small corner on the bottom-inline-start (LTR). The small
* corner is ~1/3 of the main radius. RTL mirrors it to bottom-inline-end.
*
* Plain scale (use when a symmetric radius is wanted):
* ------------------------------------------------------------------------- */
--tc-radius-xs: 5px;
--tc-radius-sm: 8px;
--tc-radius-md: 13px; /* buttons, inputs */
--tc-radius-lg: 15px; /* list items, small cards */
--tc-radius-xl: 19px; /* forms, table wrap */
--tc-radius-2xl: 22px; /* cards, panels */
--tc-radius-3xl: 24px; /* modules, big surfaces */
--tc-radius-4xl: 28px; /* sidebar, topbar, main col */
--tc-radius-5xl: 30px; /* hero / overview */
--tc-radius-pill: 999px;
/* Clipped-corner presets (LTR). For RTL flip to `r r r r-small` -> `r r r-small r`. */
--tc-corner-md: 13px 13px 13px 5px;
--tc-corner-lg: 15px 15px 15px 5px;
--tc-corner-xl: 19px 19px 19px 6px;
--tc-corner-2xl: 22px 22px 22px 7px;
--tc-corner-3xl: 24px 24px 24px 8px;
--tc-corner-4xl: 28px 28px 28px 10px;
--tc-corner-5xl: 30px 30px 30px 10px;
/* ---------------------------------------------------------------------------
* 8. SHADOWS — all tinted with brand-deep, same recipe as AdminRedesign.css
* --admin-shadow 0 18px 44px mix(brand-deep 9%,transp)
* --admin-shadow-soft 0 10px 26px mix(brand-deep 8%,transp)
* ------------------------------------------------------------------------- */
--tc-shadow-xs: 0 1px 2px color-mix(in srgb, var(--tc-brand-deep) 8%, transparent);
--tc-shadow-sm: 0 10px 26px color-mix(in srgb, var(--tc-brand-deep) 8%, transparent);
--tc-shadow-md: 0 18px 44px color-mix(in srgb, var(--tc-brand-deep) 9%, transparent);
--tc-shadow-lg: 0 24px 54px color-mix(in srgb, var(--tc-brand-deep) 12%, transparent);
--tc-shadow-xl: 0 30px 80px color-mix(in srgb, var(--tc-brand-deep) 30%, transparent);
--tc-shadow-button: 0 10px 22px color-mix(in srgb, var(--tc-brand-deep) 12%, transparent);
--tc-shadow-button-primary: 0 9px 18px color-mix(in srgb, var(--tc-brand-deep) 19%, transparent);
--tc-ring-focus: 0 0 0 4px color-mix(in srgb, var(--tc-primary) 11%, transparent);
--tc-inset-top: inset 0 3px 0 color-mix(in srgb, var(--tc-primary) 15%, transparent);
--tc-inset-accent: inset 4px 0 0 color-mix(in srgb, var(--tc-primary) 30%, transparent);
/* ---------------------------------------------------------------------------
* 9. SPACING — 2px base, the rhythm the React file actually uses
* ------------------------------------------------------------------------- */
--tc-space-0: 0;
--tc-space-0-5: 2px;
--tc-space-1: 4px;
--tc-space-1-5: 6px;
--tc-space-2: 8px;
--tc-space-2-5: 10px;
--tc-space-3: 12px;
--tc-space-3-5: 14px; /* layout gap between sidebar and main */
--tc-space-4: 16px;
--tc-space-4-5: 18px; /* card padding */
--tc-space-5: 20px;
--tc-space-6: 24px;
--tc-space-7: 28px;
--tc-space-8: 32px;
--tc-space-10: 40px;
--tc-space-12: 48px;
/* Semantic spacing aliases */
--tc-gap-layout: 14px;
--tc-pad-shell: 14px;
--tc-pad-card: 18px;
--tc-pad-section: 17px;
--tc-gap-page: 18px;
--tc-gap-content: 20px;
/* ---------------------------------------------------------------------------
* 10. TYPOGRAPHY
*
* The CRM head.php loads: Montserrat, Poppins, Roboto (Google Fonts) + MDI.
* Roboto is the Ekka body face (--bs-body-font-family: Roboto).
* The React admin uses Cairo; keep that as an optional Arabic/RTL face
* since Tajawal ttf is already bundled in this same folder.
* ------------------------------------------------------------------------- */
--tc-font-sans: 'Poppins', 'Montserrat', 'Roboto', system-ui, -apple-system,
'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--tc-font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--tc-font-arabic: 'Tajawal', 'Cairo', system-ui, sans-serif;
/* Size scale (px). fluid values use the same clamp() shape as the React file. */
--tc-text-2xs: 9px; /* overlines, nav section titles, table | */
--tc-text-xs: 10px; /* field labels, badges */
--tc-text-sm: 11px;
--tc-text-smd: 12px; /* nav child links, helper text */
--tc-text-base: 13px; /* nav links, dense body */
--tc-text-md: 14px; /* default body (Ekka 0.875rem) */
--tc-text-lg: 17px; /* card titles, brand title */
--tc-text-xl: clamp(20px, 2vw, 27px); /* section h3 */
--tc-text-2xl: clamp(21px, 2.2vw, 30px); /* page / topbar title */
--tc-text-3xl: clamp(26px, 2.5vw, 36px); /* KPI / stat numbers */
--tc-text-4xl: clamp(27px, 3.4vw, 45px); /* dashboard hero */
/* Weights — Google Fonts give 300-900 for Poppins/Montserrat.
(React uses 850 a lot; snap to 800 here.) */
--tc-weight-regular: 400;
--tc-weight-medium: 500;
--tc-weight-semibold: 600;
--tc-weight-bold: 700; /* nav links */
--tc-weight-extra: 800; /* labels, card titles, buttons */
--tc-weight-black: 900; /* eyebrows, | , hero headings */
/* Letter-spacing */
--tc-tracking-tighter: -0.035em; /* hero headings */
--tc-tracking-tight: -0.02em; /* page / card titles */
--tc-tracking-normal: 0;
--tc-tracking-wide: 0.06em; /* badges */
--tc-tracking-wider: 0.08em; /* table | */
--tc-tracking-caps: 0.18em; /* uppercase overlines */
/* Line-height */
--tc-leading-none: 1; /* stat numbers */
--tc-leading-tight: 1.2; /* headings */
--tc-leading-snug: 1.3; /* brand title */
--tc-leading-normal: 1.5; /* body base */
--tc-leading-relaxed: 1.8; /* paragraphs */
/* ---------------------------------------------------------------------------
* 11. MOTION — from ui-interactions.css / ekka.css (0.18s ease is the norm)
* ------------------------------------------------------------------------- */
--tc-ease: ease;
--tc-duration-fast: 0.16s;
--tc-duration: 0.18s;
--tc-duration-slow: 0.24s;
--tc-transition: transform 0.18s ease, box-shadow 0.18s ease,
border-color 0.18s ease, background 0.18s ease;
}
/* RTL: mirror the clipped corner to the bottom-inline-end side.
Enable by adding dir="rtl" (or an .rtl class) on /. */
:root:dir(rtl),
[dir='rtl'] {
--tc-corner-md: 13px 13px 5px 13px;
--tc-corner-lg: 15px 15px 5px 15px;
--tc-corner-xl: 19px 19px 6px 19px;
--tc-corner-2xl: 22px 22px 7px 22px;
--tc-corner-3xl: 24px 24px 8px 24px;
--tc-corner-4xl: 28px 28px 10px 28px;
--tc-corner-5xl: 30px 30px 10px 30px;
}
|