/**
 * ============================================================
 * AKBAR KHAN TRUST
 * GLOBAL DESIGN VARIABLES
 * ============================================================
 *
 * File:
 * /public_html/assets/css/core/variables.css
 *
 * Version : 1.0.0 CLEAN PRODUCTION
 * Theme   : Islamic Green • Gold • White
 * PHP     : 8.2+
 *
 * RESPONSIBILITY
 * ------------------------------------------------------------
 * ✓ Global design tokens only
 * ✓ Colors
 * ✓ Typography
 * ✓ Spacing
 * ✓ Layout dimensions
 * ✓ Borders
 * ✓ Radius
 * ✓ Shadows
 * ✓ Transitions
 * ✓ Z-index
 * ✓ Form/control dimensions
 *
 * DO NOT PUT HERE
 * ------------------------------------------------------------
 * ✗ Component selectors
 * ✗ Navigation styles
 * ✗ Header styles
 * ✗ Sidebar styles
 * ✗ Page styles
 * ✗ Media queries
 * ✗ JavaScript
 *
 * ============================================================
 */

:root {

    /* ========================================================
       01. BRAND COLORS
       ======================================================== */

    --color-primary: #0b6b3a;
    --color-primary-dark: #07532d;
    --color-primary-light: #138a4c;

    --color-secondary: #b08d2f;
    --color-secondary-dark: #8c6d1f;
    --color-secondary-light: #d4b65c;

    --color-white: #ffffff;
    --color-black: #000000;


    /* ========================================================
       02. BACKGROUND COLORS
       ======================================================== */

    --color-bg: #ffffff;
    --color-bg-soft: #f8faf9;
    --color-bg-muted: #f1f5f3;
    --color-bg-dark: #10231a;

    --color-surface: #ffffff;
    --color-surface-soft: #f7faf8;
    --color-surface-hover: #f0f6f3;


    /* ========================================================
       03. TEXT COLORS
       ======================================================== */

    --color-text: #1f2933;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-text-light: #9ca3af;
    --color-text-inverse: #ffffff;

    --color-heading: #173b2b;


    /* ========================================================
       04. BORDER COLORS
       ======================================================== */

    --color-border: #dfe7e2;
    --color-border-light: #edf2ef;
    --color-border-dark: #c5d1ca;


    /* ========================================================
       05. STATUS COLORS
       ======================================================== */

    --color-success: #198754;
    --color-success-light: #eaf7ef;
    --color-success-dark: #146c43;

    --color-warning: #d39e00;
    --color-warning-light: #fff8df;
    --color-warning-dark: #997404;

    --color-danger: #dc3545;
    --color-danger-light: #fdebed;
    --color-danger-dark: #b02a37;

    --color-info: #0d6efd;
    --color-info-light: #eaf2ff;
    --color-info-dark: #0a58ca;


    /* ========================================================
       06. TYPOGRAPHY
       ======================================================== */

    --font-family-sans:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    --font-family-heading:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    --font-family-bangla:
        "Noto Sans Bengali",
        "Noto Sans",
        "Segoe UI",
        sans-serif;

    --font-family-arabic:
        "Noto Naskh Arabic",
        "Noto Sans Arabic",
        serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;


    /* ========================================================
       07. SPACING
       ======================================================== */

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;


    /* ========================================================
       08. CONTAINER / LAYOUT
       ======================================================== */

    --container-xs: 480px;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;

    --container-padding: 1rem;

    --header-height: 72px;
    --topbar-height: 40px;

    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;


    /* ========================================================
       09. BORDER RADIUS
       ======================================================== */

    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;


    /* ========================================================
       10. BORDERS
       ======================================================== */

    --border-width: 1px;
    --border-width-2: 2px;

    --border-default:
        var(--border-width)
        solid
        var(--color-border);

    --border-light:
        var(--border-width)
        solid
        var(--color-border-light);

    --border-dark:
        var(--border-width)
        solid
        var(--color-border-dark);


    /* ========================================================
       11. SHADOWS
       ======================================================== */

    --shadow-none: none;

    --shadow-sm:
        0 1px 2px rgba(0, 0, 0, 0.05);

    --shadow-md:
        0 4px 12px rgba(0, 0, 0, 0.08);

    --shadow-lg:
        0 10px 30px rgba(0, 0, 0, 0.10);

    --shadow-xl:
        0 20px 45px rgba(0, 0, 0, 0.12);

    --shadow-card:
        0 4px 20px rgba(16, 35, 26, 0.08);

    --shadow-navigation:
        0 4px 18px rgba(0, 0, 0, 0.08);


    /* ========================================================
       12. TRANSITIONS
       ======================================================== */

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    --transition-default:
        all
        var(--transition-normal);


    /* ========================================================
       13. Z-INDEX SYSTEM
       ======================================================== */

    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-header: 1200;
    --z-sidebar: 1300;
    --z-overlay: 1400;
    --z-modal: 1500;
    --z-popover: 1600;
    --z-tooltip: 1700;
    --z-toast: 1800;


    /* ========================================================
       14. FORM / CONTROL DIMENSIONS
       ======================================================== */

    --control-height-sm: 32px;
    --control-height-md: 40px;
    --control-height-lg: 48px;

    --control-padding-x: 0.875rem;
    --control-padding-y: 0.625rem;


    /* ========================================================
       15. ICON SIZES
       ======================================================== */

    --icon-xs: 12px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-2xl: 48px;


    /* ========================================================
       16. AVATAR SIZES
       ======================================================== */

    --avatar-xs: 24px;
    --avatar-sm: 32px;
    --avatar-md: 40px;
    --avatar-lg: 56px;
    --avatar-xl: 80px;


    /* ========================================================
       17. ACCESSIBILITY
       ======================================================== */

    --focus-ring:
        0 0 0 3px rgba(11, 107, 58, 0.20);

    --focus-border: var(--color-primary);


    /* ========================================================
       18. OVERLAY
       ======================================================== */

    --overlay-light:
        rgba(0, 0, 0, 0.20);

    --overlay-medium:
        rgba(0, 0, 0, 0.40);

    --overlay-dark:
        rgba(0, 0, 0, 0.65);


    /* ========================================================
       19. ANIMATION
       ======================================================== */

    --animation-duration-fast: 150ms;
    --animation-duration-normal: 250ms;
    --animation-duration-slow: 400ms;

    --animation-easing:
        cubic-bezier(0.4, 0, 0.2, 1);


    /* ========================================================
       20. PUBLIC WEBSITE
       ======================================================== */

    --public-header-height: 72px;
    --public-navigation-height: 64px;

    --public-section-padding:
        var(--space-16);

    --public-section-padding-mobile:
        var(--space-10);


    /* ========================================================
       21. ADMIN PANEL
       ======================================================== */

    --admin-topbar-height: 64px;

    --admin-sidebar-width: 260px;

    --admin-content-padding: 1.5rem;

    --admin-card-radius:
        var(--radius-lg);


    /* ========================================================
       22. FEATURE / CONTENT
       ======================================================== */

    --feature-icon-size: 48px;
    --feature-card-radius: var(--radius-lg);

    --stat-card-radius: var(--radius-lg);

    --progress-height: 8px;

    --badge-radius: var(--radius-full);


    /* ========================================================
       23. TABLE
       ======================================================== */

    --table-cell-padding-x: 1rem;
    --table-cell-padding-y: 0.75rem;

    --table-header-weight:
        var(--font-weight-semibold);


    /* ========================================================
       24. MODAL
       ======================================================== */

    --modal-width-sm: 400px;
    --modal-width-md: 600px;
    --modal-width-lg: 900px;
    --modal-width-xl: 1200px;


    /* ========================================================
       25. CONTENT WIDTH
       ======================================================== */

    --content-max-width: 1200px;
    --reading-max-width: 760px;
}