/* ============================================================================= Tetra Technology — Canonical Design Tokens (single source of truth) ----------------------------------------------------------------------------- Link this AFTER bootstrap.min.css and BEFORE each area's own stylesheet in every layout (admin master, shop layout, user portal layout). This file ONLY defines CSS custom properties + a few opt-in `.ui-*` helper classes. It does NOT restyle any existing element on its own, so adding the is always safe and non-breaking. Areas "opt in" by pointing their own variables/rules at these tokens. Canonical brand = NPK International green #2e7d32 with orange #f06018 accent (matched from the NPK International logo/Facebook page). The admin per-user "My Theme" system still overrides its --app-* vars at runtime, so unifying the default does not remove per-user customisation. ========================================================================== */ :root{ /* ---- Brand ---- */ --ui-brand:#2e7d32; --ui-brand-600:#276b2b; --ui-brand-700:#1f5723; --ui-brand-050:#e8f5e9; --ui-brand-100:#c8e6c9; --ui-on-brand:#ffffff; --ui-accent:#f06018; --ui-accent-600:#d14e0e; /* ---- Neutrals / surfaces ---- */ --ui-bg:#f4f6f8; --ui-surface:#ffffff; --ui-surface-2:#f8fafc; --ui-text:#1f2937; --ui-muted:#6b7280; --ui-heading:#0f172a; --ui-border:#e5e8ec; --ui-border-strong:#d3d8de; /* ---- Status ---- */ --ui-success:#16a34a; --ui-success-bg:#dcfce7; --ui-success-fg:#166534; --ui-danger:#dc2626; --ui-danger-bg:#fee2e2; --ui-danger-fg:#991b1b; --ui-warning:#f59e0b; --ui-warning-bg:#fef3c7; --ui-warning-fg:#92400e; --ui-info:#0ea5e9; --ui-info-bg:#e0f2fe; --ui-info-fg:#075985; /* ---- Radius ---- */ --ui-radius-sm:6px; --ui-radius:10px; --ui-radius-lg:14px; --ui-radius-pill:999px; /* ---- Shadow ---- */ --ui-shadow-sm:0 1px 2px rgba(15,23,42,.06); --ui-shadow:0 4px 14px rgba(15,23,42,.08); --ui-shadow-lg:0 12px 32px rgba(15,23,42,.12); /* ---- Spacing scale ---- */ --ui-space-1:4px; --ui-space-2:8px; --ui-space-3:12px; --ui-space-4:16px; --ui-space-5:24px; --ui-space-6:32px; --ui-space-7:48px; /* ---- Typography ---- */ --ui-font:'Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; --ui-fs-xs:12px; --ui-fs-sm:13px; --ui-fs-base:14px; --ui-fs-lg:16px; --ui-fs-xl:20px; --ui-fs-2xl:26px; --ui-lh:1.5; /* ---- Layout ---- */ --ui-container:1200px; --ui-touch:42px; /* minimum interactive target on touch screens */ } /* Dark-theme token overrides. Activated by Bootstrap's data-bs-theme="dark" (already used by the admin chrome) OR a .ui-dark class you can toggle on the storefront/portal . Only the token VALUES change here. */ [data-bs-theme="dark"], .ui-dark{ --ui-bg:#0f172a; --ui-surface:#1e293b; --ui-surface-2:#243149; --ui-text:#cbd5e1; --ui-muted:#94a3b8; --ui-heading:#e2e8f0; --ui-border:#334155; --ui-border-strong:#475569; --ui-brand-050:#0f2e14; --ui-brand-100:#123a19; } /* ----------------------------------------------------------------------------- Opt-in helpers — safe because they only apply where the class is added. Use these when building NEW markup; do not blanket-replace existing classes. ----------------------------------------------------------------------------- */ .ui-card{background:var(--ui-surface);border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-sm)} .ui-card__head{padding:14px 18px;border-bottom:1px solid var(--ui-border); font-weight:700;color:var(--ui-heading)} .ui-card__body{padding:18px} .ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px; border:1px solid transparent;border-radius:var(--ui-radius-sm);padding:9px 14px; font-size:var(--ui-fs-sm);font-weight:600;line-height:1.2;cursor:pointer; text-decoration:none;transition:.15s} .ui-btn-brand{background:var(--ui-brand);color:var(--ui-on-brand)} .ui-btn-brand:hover{background:var(--ui-brand-700);color:#fff} .ui-btn-outline{background:transparent;border-color:var(--ui-border-strong);color:var(--ui-text)} .ui-btn-outline:hover{border-color:var(--ui-brand);color:var(--ui-brand)} .ui-btn-block{width:100%} .ui-field{width:100%;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm); padding:10px 12px;font-size:var(--ui-fs-base);font-family:inherit; background:var(--ui-surface);color:var(--ui-text)} .ui-field:focus{outline:none;border-color:var(--ui-brand); box-shadow:0 0 0 3px rgba(13,110,110,.15)} .ui-badge{display:inline-block;padding:3px 9px;border-radius:var(--ui-radius-pill); font-size:var(--ui-fs-xs);font-weight:700;line-height:1.4} .ui-badge-success{background:var(--ui-success-bg);color:var(--ui-success-fg)} .ui-badge-danger{background:var(--ui-danger-bg);color:var(--ui-danger-fg)} .ui-badge-warning{background:var(--ui-warning-bg);color:var(--ui-warning-fg)} .ui-badge-info{background:var(--ui-info-bg);color:var(--ui-info-fg)} /* Horizontal-scroll wrapper for wide data tables on small screens. */ .ui-table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} /* Consistent empty-state block for lists with no rows. */ .ui-empty{text-align:center;padding:40px 20px;color:var(--ui-muted)} .ui-empty i{font-size:34px;display:block;margin-bottom:10px;opacity:.55}