--- ## 📄 FILE 2: `variables.css` (সম্পূর্ণ নতুন) **Path:** `public_html/assets/css/variables.css` ```css /* ============================================================ FILE: assets/css/variables.css Purpose: 🎨 CENTRAL COLOR + FONT SYSTEM Theme: Green (Primary) + Sky Blue (Accent) + Black + White Version: 2.0.0 ------------------------------------------------------------ ⚠️ IMPORTANT: এই File-ই Design-এর একমাত্র Source of Truth। যেকোনো Page-এ এই Variables গুলোই ব্যবহার করতে হবে। কখনো Hard-code Color ব্যবহার করা যাবে না। ============================================================ */ :root { /* ============================================================ 🎨 PRIMARY COLORS — GREEN (Brand Identity) ============================================================ */ --c-primary: #059669; /* Main Brand Green */ --c-primary-dark: #047857; /* Hover/Active */ --c-primary-deep: #065f46; /* Deep variant */ --c-primary-light: #10b981; /* Light accent */ --c-primary-soft: #d1fae5; /* Light background */ --c-primary-mist: #ecfdf5; /* Very light bg */ --c-primary-fade: rgba(5, 150, 105, 0.08); /* ============================================================ 🎨 ACCENT COLORS — SKY BLUE ============================================================ */ --c-accent: #0ea5e9; /* Sky Blue accent */ --c-accent-dark: #0284c7; /* Hover */ --c-accent-deep: #075985; /* Deep */ --c-accent-light: #38bdf8; /* Light variant */ --c-accent-soft: #e0f2fe; /* Light background */ --c-accent-mist: #f0f9ff; /* Very light bg */ /* ============================================================ 🎨 DARK / BLACK ============================================================ */ --c-dark: #0a0a0a; /* Almost black */ --c-dark-2: #1a1a1a; /* Secondary dark */ --c-dark-soft: #2d2d2d; /* Soft dark */ /* ============================================================ 🎨 SECONDARY COLORS (Slate Gray) ============================================================ */ --c-secondary: #475569; --c-secondary-dark: #334155; --c-secondary-light: #64748b; --c-secondary-soft: #e2e8f0; /* ============================================================ 🎨 SEMANTIC COLORS (Status/Feedback) ============================================================ */ --c-success: #059669; /* Green — Approved/Success */ --c-success-dark: #047857; --c-success-soft: #d1fae5; --c-warning: #f59e0b; /* Amber — Pending/Warning */ --c-warning-dark: #d97706; --c-warning-soft: #fef3c7; --c-danger: #dc2626; /* Red — Delete/Danger */ --c-danger-dark: #b91c1c; --c-danger-soft: #fee2e2; --c-info: #0ea5e9; /* Sky — Info */ --c-info-dark: #0284c7; --c-info-soft: #e0f2fe; /* ============================================================ 🎨 SURFACES (Backgrounds) ============================================================ */ --c-bg: #f7faf9; /* Page Background (green-white tint) */ --c-bg-alt: #fafbfc; /* Alternate Background */ --c-surface: #ffffff; /* Card/Panel Background */ --c-surface-hover: #f8fafc; /* Hover State */ /* ============================================================ 🎨 TEXT COLORS ============================================================ */ --c-text: #0a0a0a; /* Primary Text */ --c-text-secondary: #1a1a1a; /* Secondary Text */ --c-text-muted: #64748b; /* Muted/Gray Text */ --c-text-light: #94a3b8; /* Light Gray Text */ --c-text-inverse: #ffffff; /* White Text on Dark BG */ /* ============================================================ 🎨 BORDERS ============================================================ */ --c-border: #e2e8f0; --c-border-strong: #cbd5e1; --c-border-focus: #059669; /* ============================================================ 🎨 GRADIENTS ============================================================ */ --g-primary: linear-gradient(135deg, #059669 0%, #047857 100%); --g-primary-soft: linear-gradient(135deg, #10b981 0%, #059669 100%); --g-accent: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); --g-mix: linear-gradient(135deg, #059669 0%, #0ea5e9 100%); --g-success: linear-gradient(135deg, #10b981 0%, #059669 100%); --g-hero: linear-gradient(135deg, #059669 0%, #047857 55%, #064e3b 100%); --g-cta: linear-gradient(135deg, #059669 0%, #0ea5e9 100%); /* ============================================================ 🔤 TYPOGRAPHY — FONTS ============================================================ */ --font-heading: "Baloo Da 2", "Hind Siliguri", system-ui, sans-serif; --font-body: "Hind Siliguri", system-ui, sans-serif; --font-mono: "Courier New", monospace; /* Legacy font alias (for backward compatibility) */ --lpl-font: var(--font-body); --lpl-font-heading: var(--font-heading); /* Font Sizes */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: 1.5rem; /* 24px */ --fs-2xl: 1.875rem; /* 30px */ --fs-3xl: 2.25rem; /* 36px */ /* Legacy font size alias */ --lpl-font-size: var(--fs-base); /* Font Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Line Heights */ --lh-tight: 1.2; --lh-snug: 1.4; --lh-normal: 1.65; --lh-relaxed: 1.8; /* ============================================================ 📐 SPACING (4px Scale) ============================================================ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ============================================================ 📐 BORDER RADIUS ============================================================ */ --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-3xl: 24px; --r-pill: 999px; /* ============================================================ 🌑 SHADOWS ============================================================ */ --sh-sm: 0 1px 3px rgba(10, 10, 10, .05); --sh-md: 0 4px 12px rgba(10, 10, 10, .08); --sh-lg: 0 8px 24px rgba(10, 10, 10, .10); --sh-xl: 0 16px 40px rgba(10, 10, 10, .14); --sh-primary: 0 8px 24px rgba(5, 150, 105, .28); --sh-accent: 0 8px 24px rgba(14, 165, 233, .28); --sh-success: 0 8px 24px rgba(5, 150, 105, .28); /* ============================================================ ⏱️ TRANSITIONS ============================================================ */ --tr-fast: 150ms ease; --tr-base: 250ms ease; --tr-slow: 400ms ease; --tr-bounce: 280ms cubic-bezier(.34, 1.56, .64, 1); /* ============================================================ 📏 LAYOUT ============================================================ */ --sidebar-width: 260px; --header-height: 64px; --container-max: 1280px; /* ============================================================ 🔗 BOOTSTRAP OVERRIDES ============================================================ */ --bs-primary: var(--c-primary); --bs-primary-rgb: 5, 150, 105; --bs-body-bg: var(--c-bg); --bs-body-color: var(--c-text); --bs-border-color: var(--c-border); --bs-border-radius: var(--r-md); --bs-font-sans-serif: var(--font-body); /* ============================================================ 🔗 LEGACY ALIASES (for backward compatibility) — পুরনো ফাইলগুলো যাতে না ভাঙে ============================================================ */ --lpl-primary: var(--c-primary); --lpl-primary-dark: var(--c-primary-dark); --lpl-primary-soft: var(--c-primary-soft); --lpl-secondary: var(--c-secondary); --lpl-success: var(--c-success); --lpl-warning: var(--c-warning); --lpl-danger: var(--c-danger); --lpl-info: var(--c-info); --lpl-bg: var(--c-bg); --lpl-surface: var(--c-surface); --lpl-text: var(--c-text); --lpl-text-muted: var(--c-text-muted); --lpl-border: var(--c-border); --lpl-border-strong: var(--c-border-strong); --lpl-radius: var(--r-md); --lpl-radius-lg: var(--r-2xl); --lpl-radius-pill: var(--r-pill); --lpl-radius-xl: var(--r-3xl); --lpl-shadow-sm: var(--sh-sm); --lpl-shadow: var(--sh-md); --lpl-shadow-md: var(--sh-md); --lpl-shadow-lg: var(--sh-lg); --lpl-header-height: var(--header-height); --lpl-sidebar-width: var(--sidebar-width); --lpl-primary-soft-bg: var(--c-primary-soft); } /* ============================================================ BASE STYLES ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--c-text); background-color: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ HEADINGS — Baloo Da 2 Font ============================================================ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-heading); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-text); letter-spacing: -.2px; margin-top: 0; margin-bottom: var(--sp-3); } h1, .h1 { font-size: var(--fs-3xl); } h2, .h2 { font-size: var(--fs-2xl); } h3, .h3 { font-size: var(--fs-xl); } h4, .h4 { font-size: var(--fs-lg); } h5, .h5 { font-size: var(--fs-md); } h6, .h6 { font-size: var(--fs-base); } /* ============================================================ BODY TEXT — Hind Siliguri Font ============================================================ */ p, span, div, li, td, th, label, small, strong, b, em, i, a { font-family: var(--font-body); } p { margin-bottom: var(--sp-3); line-height: var(--lh-normal); } small, .small { font-size: var(--fs-sm); color: var(--c-text-muted); } /* ============================================================ LINKS — No underline, green → sky on hover ============================================================ */ a { color: var(--c-primary-dark); text-decoration: none !important; transition: color var(--tr-fast); } a:hover, a:focus, a:active { color: var(--c-accent); text-decoration: none !important; } /* ============================================================ CODE / PRE ============================================================ */ code, kbd, pre { font-family: var(--font-mono); color: var(--c-primary-dark); background: var(--c-primary-soft); padding: 2px 6px; border-radius: var(--r-sm); font-size: .875em; } /* ============================================================ SELECTION ============================================================ */ ::selection { background: var(--c-primary-soft); color: var(--c-primary-deep); } /* ============================================================ SCROLLBAR (Optional) ============================================================ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--c-bg); } ::-webkit-scrollbar-thumb { background: var(--c-primary-light); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--c-primary); }