@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap'); :root{--primary:#F35B25;--primary-rgb:243, 91, 37;--primary-50:#FFF6F2;--primary-100:#FFEBE3;--primary-200:#FFD4C4;--primary-300:#FFB399;--primary-400:#FF8A66;--primary-500:#F35B25;--primary-600:#D94E1D;--primary-700:#C7441A;--primary-800:#A63816;--primary-900:#852D12;--color-orange:#F35B25;--color-orange-hover:#D94E1D;--secondary:#26262d;--secondary-50:#f8fafc;--secondary-100:#f1f5f9;--secondary-200:#e2e8f0;--secondary-300:#cbd5e1;--secondary-400:#94a3b8;--secondary-500:#64748b;--secondary-600:#475569;--secondary-700:#334155;--secondary-800:#1e293b;--secondary-900:#0f172a;--white:#ffffff;--black:#181818;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#afafaf;--gray-500:#898989;--gray-600:#6f6f6f;--gray-700:#4f4f4f;--gray-800:#353535;--gray-900:#232323;--success:#10b981;--success-light:#d1fae5;--success-dark:#047857;--warning:#f59e0b;--warning-light:#fef3c7;--warning-dark:#d97706;--danger:#ef4444;--danger-light:#fee2e2;--danger-dark:#dc2626;--info:#3b82f6;--info-light:#dbeafe;--info-dark:#1d4ed8;--bg-primary:var(--white);--rev-bg-primary:var(--white);--bg-secondary:var(--gray-50);--rev-bg-secondary:var(--bg-secondary);--bg-tertiary:var(--gray-100);--bg-quaternary:var(--gray-50);--bg-gradient:linear-gradient(135deg,rgba(0,0,0,0.02) 0%,rgba(0,0,0,0.05) 100%);--bg-overlay:rgba(255,255,255,0.8);--bg-glass:rgba(255,255,255,0.1);--text-primary:var(--black);--text-secondary:var(--gray-600);--text-tertiary:var(--gray-800);--text-inverse:var(--white);--text-muted:var(--gray-500);--header-bg:rgba(255,255,255,0.1);--footer-bg:var(--bg-primary);--text-link:var(--primary);--text-link-hover:var(--primary-600);--border-primary:var(--gray-300);--border-secondary:var(--gray-200);--border-tertiary:var(--gray-200);--border-subtle:rgba(0,0,0,0.1);--border-muted:rgba(0,0,0,0.05);--border-focus:var(--primary);--border-success:var(--success);--border-warning:var(--warning);--border-danger:var(--danger);--surface-primary:var(--white);--surface-secondary:var(--gray-50);--surface-tertiary:var(--gray-100);--surface-overlay:rgba(0,0,0,0.1);--icon-primary:var(--gray-600);--icon-secondary:var(--gray-400);--icon-inverse:var(--white);--icon-accent:var(--primary);--hero-bg-image:url('../../../assets/media/pages/home/light-hero-bg.webp');--font-family-primary:'Bricolage Grotesque','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--glass-bg:rgba(0,0,0,0.03);--glass-bg-strong:rgba(0,0,0,0.06);--glass-border:rgba(0,0,0,0.08);--glass-border-hover:rgba(240,90,40,0.4);--glass-blur:blur(24px);--glass-blur-strong:blur(32px);--mesh-blob-1:rgba(240,90,40,0.18);--mesh-blob-2:rgba(240,90,40,0.10);--mesh-blob-3:rgba(64,64,64,0.10);--font-family-secondary:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-family-mono:'SF Mono',Monaco,'Cascadia Code','Roboto Mono',Consolas,'Courier New',monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--text-7xl:4.5rem;--text-8xl:6rem;--text-9xl:8rem;--font-thin:100;--font-extralight:200;--font-light:300;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--font-extrabold:800;--font-black:900;--leading-none:1;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;--tracking-tighter:-0.05em;--tracking-tight:-0.025em;--tracking-normal:0em;--tracking-wide:0.025em;--tracking-wider:0.05em;--tracking-widest:0.1em;--space-0:0;--space-px:1px;--space-0_5:0.125rem;--space-1:0.25rem;--space-1_5:0.375rem;--space-2:0.5rem;--space-2_5:0.625rem;--space-3:0.75rem;--space-3_5:0.875rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-9:2.25rem;--space-10:2.5rem;--space-11:2.75rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-28:7rem;--space-32:8rem;--space-36:9rem;--space-40:10rem;--space-44:11rem;--space-48:12rem;--space-52:13rem;--space-56:14rem;--space-60:15rem;--space-64:16rem;--space-72:18rem;--space-80:20rem;--space-96:24rem;--radius-none:0;--radius-sm:0.125rem;--radius-base:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--radius-pill:9999px;--border-width-0:0;--border-width:1px;--border-width-2:2px;--border-width-4:4px;--border-width-8:8px;--border-width-none:0;--border-width-thin:1px;--border-width-medium:2px;--border-width-thick:4px;--border-width-heavy:8px;--shadow-none:none;--shadow-xs:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-sm:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);--shadow-base:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,0.25);--shadow-inner:inset 0 2px 4px 0 rgba(0,0,0,0.05);--shadow-hover:var(--shadow-lg);--shadow-focus:0 0 0 0.5px rgba(0,0,0,0.1);--shadow-active:var(--shadow-sm);--shadow-card:var(--shadow-md);--shadow-card-hover:var(--shadow-lg);--shadow-button:var(--shadow-sm);--shadow-button-hover:var(--shadow-md);--shadow-input:var(--shadow-xs);--shadow-input-focus:var(--shadow-sm);--shadow-modal:var(--shadow-2xl);--shadow-dropdown:var(--shadow-lg);--shadow-tooltip:var(--shadow-md);--shadow-navbar:var(--shadow-md);--shadow-drawer:var(--shadow-xl);--duration-75:75ms;--duration-100:100ms;--duration-150:150ms;--duration-200:200ms;--duration-300:300ms;--duration-500:500ms;--duration-700:700ms;--duration-1000:1000ms;--ease-linear:linear;--ease-in:cubic-bezier(0.4,0,1,1);--ease-out:cubic-bezier(0,0,0.2,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);--ease-bounce:cubic-bezier(0.68,-0.55,0.265,1.55);--ease-elastic:cubic-bezier(0.175,0.885,0.32,1.275);--transition-fast:var(--duration-150) var(--ease-out);--transition-base:var(--duration-300) var(--ease-in-out);--transition-slow:var(--duration-500) var(--ease-in-out);--transition-colors:color var(--duration-200) var(--ease-out),background-color var(--duration-200) var(--ease-out),border-color var(--duration-200) var(--ease-out);--transition-opacity:opacity var(--duration-200) var(--ease-out);--transition-transform:transform var(--duration-200) var(--ease-out);--transition-all:all var(--duration-300) var(--ease-in-out);--z-auto:auto;--z-0:0;--z-10:10;--z-20:20;--z-30:30;--z-40:40;--z-50:50;--z-dropdown:100;--z-sticky:200;--z-fixed:300;--z-modal-backdrop:400;--z-modal:500;--z-popover:600;--z-tooltip:700;--z-toast:800;--z-max:9999;--container-xs:480px;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px;--container-max:1300px;--header-height:75px;--footer-height:300px;--input-height:48px;--input-height-sm:40px;--input-height-lg:56px;--button-height:48px;--button-height-sm:40px;--button-height-lg:56px;--input-bg:var(--bg-secondary);--input-color:var(--text-primary);--input-placeholder:var(--text-muted);--input-border:var(--border-secondary);--input-border-focus:var(--primary-400);--input-shadow:var(--shadow-sm);--input-shadow-focus:var(--shadow-xs);--theme-transition:var(--transition-all);--transition-fast:var(--transition-fast);--transition-base:var(--transition-base);--transition-slow:var(--transition-slow);--border-color:var(--border-primary);--border-hover-color:var(--primary);--border-light:var(--border-secondary);--card-bg:var();--card-bg:var(-);--card-bg:var(--);--card-bg:var(--);--card-bg:var(--bg-secondary);--rev-card-bg:var(--bg-primary);--gray:var(--gray-500);--dark:var(--gray-800);--darker:var(--gray-900);--light:var(--white);--shadow-small:var(--shadow-sm);--shadow-medium:var(--shadow-md);--shadow-large:var(--shadow-lg)}[data-theme="dark"]{--primary:#ff5050;--primary-50:#281c1c;--primary-100:#4d1111;--primary-200:#6b1919;--primary-300:#8b2222;--primary-400:#f04141;--primary-500:#fb6e6e;--primary-600:#fb7878;--primary-700:#ff9999;--primary-800:#ffb3b3;--primary-900:#ffcccc;--bg-primary:#0a0a0a;--rev-bg-primary:var(--bg-secondary);--bg-secondary:#171717;--rev-bg-secondary:var(--bg-primary);--bg-tertiary:#262626;--bg-quaternary:var(--gray-900);--bg-gradient:linear-gradient(135deg,rgba(255,255,255,0.02) 0%,rgba(255,255,255,0.05) 100%);--bg-overlay:rgba(0,0,0,0.8);--bg-glass:rgba(0,0,0,0.1);--text-primary:var(--white);--text-secondary:var(--gray-300);--text-tertiary:var(--gray-400);--text-inverse:var(--white);--text-muted:var(--gray-400);--text-link:var(--gray-200);--text-link-hover:var(--background-dark);--text-link-hover:var(--primary-700);--border-tertiary:var(--gray-800);--border-subtle:rgba(255,255,255,0.1);--border-muted:rgba(255,255,255,0.05);--border-focus:var(--primary);--border-success:var(--success);--border-warning:var(--warning);--border-danger:var(--danger);--border-secondary:var(--gray-700);--surface-primary:#171717;--surface-secondary:var(--gray-800);--surface-tertiary:var(--gray-700);--surface-overlay:rgba(255,255,255,0.1);--icon-primary:var(--gray-300);--icon-secondary:var(--gray-500);--icon-inverse:var(--white);--icon-accent:var(--primary);--hero-bg-image:url('../../../assets/media/pages/home/dark-hero-bg.webp');--glass-bg:rgba(255,255,255,0.04);--glass-bg-strong:rgba(255,255,255,0.08);--glass-border:rgba(255,255,255,0.09);--glass-border-hover:rgba(240,90,40,0.45);--mesh-blob-1:rgba(240,90,40,0.16);--mesh-blob-2:rgba(240,90,40,0.09);--mesh-blob-3:rgba(255,255,255,0.05);--input-bg:var(--surface-primary);--input-color:var(--text-primary);--input-placeholder:var(--text-tertiary);--input-border:var(--border-light);--input-border-focus:var(--primary-600);--input-shadow:var(--shadow-sm);--input-shadow-focus:var(--shadow-sm);--shadow-xs:0 1px 2px 0 rgba(0,0,0,0.3);--shadow-sm:0 1px 3px 0 rgba(0,0,0,0.2),0 1px 2px -1px rgba(0,0,0,0.2);--shadow-base:0 1px 3px 0 rgba(0,0,0,0.2),0 1px 2px -1px rgba(0,0,0,0.2);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.2),0 2px 4px -2px rgba(0,0,0,0.2);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.2),0 4px 6px -4px rgba(0,0,0,0.2);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.3),0 8px 10px -6px rgba(0,0,0,0.3);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,0.5);--shadow-inner:inset 0 2px 4px 0 rgba(0,0,0,0.3);--shadow-hover:var(--shadow-lg);--shadow-focus:0 0 0 3px rgba(255,107,107,0.3);--shadow-active:var(--shadow-sm);--shadow-card:var(--shadow-md);--shadow-card-hover:var(--shadow-lg);--shadow-button:var(--shadow-sm);--shadow-button-hover:var(--shadow-md);--shadow-input:var(--shadow-xs);--shadow-input-focus:var(--shadow-sm);--shadow-modal:var(--shadow-2xl);--shadow-dropdown:var(--shadow-lg);--shadow-tooltip:var(--shadow-md);--shadow-navbar:var(--shadow-md);--shadow-drawer:var(--shadow-xl);--border-color:var(--primary);--border-hover-color:var(--white);--border-light:var(--border-secondary);--card-bg:var(--bg-secondary);--rev-card-bg:var(--bg-secondary);--input-bg:var(--surface-primary);--header-bg:rgba(23,23,23,0.9);--footer-bg:var(--bg-secondary);--footer-text:var(--text-primary);--glass-border:var(--primary);--glass-border-hover:var(--white);--shadow-small:var(--shadow-sm);--shadow-medium:var(--shadow-md);--shadow-large:var(--shadow-lg)}:root{--text-dark:var(--text-primary);--background-light:var(--bg-secondary);--background-dark:var(--bg-primary)} /* ============================================================================ * PHASE 0a — SOFT NEUTRAL / PILL DESIGN TOKENS * ---------------------------------------------------------------------------- * Canonical token layer for the UI redesign. * * Appended AFTER the legacy :root and [data-theme="dark"] blocks on purpose: * :root and [data-theme="dark"] have equal specificity, so source order decides * the winner. Everything below therefore overrides the legacy values in BOTH * themes. * * Two sections: * 1. CANONICAL — the only tokens that hold literal values. * 2. LEGACY ALIASES — old token names re-pointed onto the canonical ones, so * the existing stylesheets inherit the new look without a single component * edit (the Phase 0a rule). Aliases only ever reference var(--canonical), * never a literal, which is why the dark block below needs to restate the * canonical values only. * * IDENTICAL COPY in all three token files — keep them byte-identical: * areas/admin/assets/css/variables.css (drives admin + employee) * areas/client/assets/css/variables.css * areas/public/assets/css/variables.css * * NOT touched here (deliberately): spacing scale, font sizes/weights, the * gray and primary ramps, header/footer surfaces (Phase 2 — shell). * * To revert: delete this block from all three files and bump ASSETS_VERSION. * ========================================================================== */ :root, [data-theme] { /* == 1. CANONICAL ======================================================== */ /* -- canvas & surfaces --------------------------------------------------- */ --canvas: #F4F5F6; /* page background */ --surface: #FFFFFF; /* cards */ --surface-sunken: #FAFAFB; /* nested panel, table header, inner tile */ --border-hairline: rgba(0, 0, 0, 0.06); --border-strong: rgba(0, 0, 0, 0.10); /* -- ink ----------------------------------------------------------------- */ --ink-strong: #111214; /* headings, KPI numbers, primary button fill */ --ink: #2B2D31; /* body copy */ --ink-soft: #6B7280; /* secondary text */ --ink-muted: #8A8F98; /* captions, column headers */ --ink-inverse: #FFFFFF; --ink-on-solid: #FFFFFF; /* text/ring on a solid coloured or dark surface — white in BOTH themes */ /* -- type ---------------------------------------------------------------- */ --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* -- accent -------------------------------------------------------------- */ --accent: #F35B25; --accent-rgb: 243, 91, 37; --accent-soft: rgba(243, 91, 37, 0.12); --accent-contrast: #FFFFFF; /* -- semantic (soft-tint usage; never solid saturated badges) ------------ */ --positive: #16A34A; --positive-soft: rgba(22, 163, 74, 0.12); --negative: #E5484D; --negative-soft: rgba(229, 72, 77, 0.12); --caution: #F59E0B; --caution-soft: rgba(245, 158, 11, 0.12); --info: #3B82F6; --info-soft: rgba(59, 130, 246, 0.12); --neutral: #8A8F98; --neutral-soft: rgba(138, 143, 152, 0.12); /* -- shape --------------------------------------------------------------- */ --r-card: 22px; /* outer card */ --r-inner: 14px; /* nested card, kanban card */ --r-field: 12px; /* form field */ --r-chip: 8px; /* small square-ish chip / icon badge */ --r-pill: 999px; /* buttons, tags, search, segmented control */ /* -- elevation ----------------------------------------------------------- */ --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-card: 0 4px 16px rgba(17, 18, 20, 0.05); --shadow-raised: 0 8px 28px rgba(17, 18, 20, 0.08); --shadow-overlay: 0 24px 64px rgba(17, 18, 20, 0.18); --focus-ring: 0 0 0 3px var(--accent-soft); /* -- control sizing ------------------------------------------------------ */ --control-h: 44px; --control-h-sm: 36px; --control-h-lg: 52px; --icon-btn: 38px; --icon-btn-sm: 32px; /* == 2. LEGACY ALIASES =================================================== */ /* -- surfaces (the canvas/card inversion: page was white + gray cards, * it is now a gray canvas carrying white cards) ----------------------- */ --bg-primary: var(--canvas); --bg-secondary: var(--surface); --bg-tertiary: var(--surface-sunken); --bg-quaternary: var(--surface-sunken); --rev-bg-primary: var(--surface); --rev-bg-secondary: var(--canvas); --card-bg: var(--surface); --rev-card-bg: var(--surface-sunken); --surface-primary: var(--surface); --surface-secondary:var(--surface-sunken); --surface-tertiary: var(--canvas); --background-light: var(--surface); --background-dark: var(--canvas); /* -- text ---------------------------------------------------------------- */ --text-primary: var(--ink-strong); --text-secondary: var(--ink-soft); --text-tertiary: var(--ink-soft); --text-muted: var(--ink-muted); --text-inverse: var(--ink-inverse); --text-dark: var(--ink-strong); --text-link: var(--accent); --font-family-primary: var(--font); --font-family-secondary: var(--font); /* -- icons --------------------------------------------------------------- */ --icon-primary: var(--ink-soft); --icon-secondary: var(--ink-muted); --icon-accent: var(--accent); /* -- borders (hairline everywhere) --------------------------------------- */ --border-primary: var(--border-strong); --border-secondary: var(--border-hairline); --border-tertiary: var(--border-hairline); --border-subtle: var(--border-hairline); --border-muted: var(--border-hairline); --border-color: var(--border-strong); --border-light: var(--border-hairline); --border-focus: var(--accent); --border-success: var(--positive); --border-warning: var(--caution); --border-danger: var(--negative); /* -- brand + semantic (unifies public's #F05A28 onto the app brand) ------ */ --primary: var(--accent); --primary-rgb: var(--accent-rgb); --success: var(--positive); --danger: var(--negative); --warning: var(--caution); /* -- radius (moderate bump; --radius-sm/base stay untouched) ------------- */ --radius-md: 8px; --radius-lg: var(--r-field); --radius-xl: var(--r-inner); --radius-2xl: var(--r-card); --radius-3xl: 28px; /* -- shadows ------------------------------------------------------------- */ --shadow-xs: var(--shadow-soft); --shadow-sm: var(--shadow-soft); --shadow-base: var(--shadow-soft); --shadow-md: var(--shadow-card); --shadow-lg: var(--shadow-raised); --shadow-xl: var(--shadow-raised); --shadow-2xl: var(--shadow-overlay); --shadow-hover: var(--shadow-raised); --shadow-active: var(--shadow-soft); --shadow-card-hover: var(--shadow-raised); --shadow-button: var(--shadow-soft); --shadow-button-hover: var(--shadow-card); --shadow-input: none; --shadow-input-focus: var(--focus-ring); --shadow-focus: var(--focus-ring); --shadow-modal: var(--shadow-overlay); --shadow-dropdown: var(--shadow-raised); --shadow-tooltip: var(--shadow-raised); --shadow-navbar: var(--shadow-soft); --shadow-drawer: var(--shadow-overlay); --shadow-small: var(--shadow-soft); --shadow-medium: var(--shadow-card); --shadow-large: var(--shadow-raised); /* -- controls ------------------------------------------------------------ */ --input-height: var(--control-h); --input-height-sm: var(--control-h-sm); --input-height-lg: var(--control-h-lg); --button-height: var(--control-h); --button-height-sm: var(--control-h-sm); --button-height-lg: var(--control-h-lg); --input-bg: var(--surface); --input-color: var(--ink); --input-placeholder: var(--ink-muted); --input-border: var(--border-hairline); --input-border-focus:var(--accent); } /* -- dark theme: canonical values only; every alias above resolves through * var() at use time, so they follow automatically -------------------- */ [data-theme="dark"] { --canvas: #0C0D0E; --surface: #161719; --surface-sunken: #1D1F22; --border-hairline: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --ink-strong: #F0F1F3; --ink: #E1E3E6; --ink-soft: #9BA1A9; --ink-muted: #8A8F98; --ink-inverse: #111214; --accent: #F35B25; --accent-rgb: 243, 91, 37; --accent-soft: rgba(243, 91, 37, 0.20); --accent-contrast: #FFFFFF; --positive: #3DD68C; --positive-soft: rgba(61, 214, 140, 0.18); --negative: #FF6369; --negative-soft: rgba(255, 99, 105, 0.18); --caution: #FFB224; --caution-soft: rgba(255, 178, 36, 0.18); --info: #6BA6FF; --info-soft: rgba(107, 166, 255, 0.18); --neutral: #7C828A; --neutral-soft: rgba(124, 130, 138, 0.18); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-raised: 0 8px 28px rgba(0, 0, 0, 0.44); --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.60); }