/*
Theme Name:        Maa Ki Rasoi Management System
Theme URI:         https://maakiarsoi.local
Author:            Maa Ki Rasoi
Author URI:        https://maakirasoi.local
Description:       A premium SaaS-style WordPress theme for Mess & Tiffin Business Management. Includes role-based dashboards, authentication, and a complete design system.
Version:           1.0.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.3
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       maa-ki-rasoi
Domain Path:       /languages
Tags:              business, custom-menu, featured-images, full-width-template, rtl-language-support, theme-options, translation-ready, dark-mode, sass, accessibility-ready
*/

/* =============================================================================
   DESIGN SYSTEM — CSS Custom Properties
   ============================================================================= */

:root {
    /* ── Primary Brand Colors (Green #16A34A) ─────────────────────────────── */
    --mkr-primary-50:    hsl(142, 70%, 96%);
    --mkr-primary-100:   hsl(142, 69%, 92%);
    --mkr-primary-200:   hsl(142, 72%, 84%);
    --mkr-primary-300:   hsl(142, 72%, 73%);
    --mkr-primary-400:   hsl(142, 71%, 58%);
    --mkr-primary-500:   hsl(142, 76%, 36%);   /* Brand primary: #16A34A */
    --mkr-primary-600:   hsl(142, 72%, 29%);
    --mkr-primary-700:   hsl(142, 76%, 22%);
    --mkr-primary-800:   hsl(142, 76%, 15%);
    --mkr-primary-900:   hsl(142, 76%, 10%);

    /* ── Secondary Brand Colors (Green #22C55E) ───────────────────────────── */
    --mkr-secondary-50:  hsl(142, 70%, 96%);
    --mkr-secondary-100: hsl(142, 69%, 92%);
    --mkr-secondary-200: hsl(142, 72%, 84%);
    --mkr-secondary-300: hsl(142, 72%, 73%);
    --mkr-secondary-400: hsl(142, 71%, 58%);
    --mkr-secondary-500: hsl(142, 72%, 45%);   /* Brand secondary: #22C55E */
    --mkr-secondary-600: hsl(142, 76%, 36%);
    --mkr-secondary-700: hsl(142, 72%, 29%);
    --mkr-secondary-800: hsl(142, 76%, 22%);
    --mkr-secondary-900: hsl(142, 76%, 15%);

    /* ── Semantic Colors ──────────────────────────────────────────────────── */
    --mkr-success-light: hsl(142, 70%, 96%);
    --mkr-success:       hsl(142, 72%, 45%);   /* #22C55E */
    --mkr-success-dark:  hsl(142, 76%, 36%);

    --mkr-danger-light:  hsl(0, 86%, 93%);
    --mkr-danger:        hsl(0, 84%, 60%);     /* #EF4444 */
    --mkr-danger-dark:   hsl(0, 84%, 44%);

    --mkr-warning-light: hsl(38, 100%, 92%);
    --mkr-warning:       hsl(38, 100%, 50%);    /* #F59E0B */
    --mkr-warning-dark:  hsl(38, 100%, 38%);

    --mkr-info-light:    hsl(214, 100%, 93%);
    --mkr-info:          hsl(214, 100%, 60%);
    --mkr-info-dark:     hsl(214, 100%, 44%);

    /* ── Neutral Slate Palette ────────────────────────────────────────────── */
    --mkr-neutral-0:    #FFFFFF;
    --mkr-neutral-50:   hsl(220, 15%, 98%);    /* Slate 50 */
    --mkr-neutral-100:  hsl(220, 13%, 95%);    /* Slate 100 */
    --mkr-neutral-200:  hsl(220, 14%, 91%);    /* Slate 200: #E5E7EB */
    --mkr-neutral-300:  hsl(220, 13%, 84%);    /* Slate 300 */
    --mkr-neutral-400:  hsl(220, 10%, 63%);    /* Slate 400 */
    --mkr-neutral-500:  hsl(220, 9%, 46%);     /* Slate 500: #6B7280 */
    --mkr-neutral-600:  hsl(220, 9%, 36%);     /* Slate 600 */
    --mkr-neutral-700:  hsl(220, 10%, 28%);    /* Slate 700 */
    --mkr-neutral-800:  hsl(220, 13%, 17%);    /* Slate 800: #1F2937 */
    --mkr-neutral-900:  hsl(222, 47%, 11%);    /* Slate 900: #0F172A */
    --mkr-neutral-950:  hsl(222, 47%, 6%);

    /* ── Light Mode Surfaces ──────────────────────────────────────────────── */
    --mkr-bg:               var(--mkr-neutral-0);
    --mkr-surface:          var(--mkr-neutral-50);
    --mkr-surface-hover:    var(--mkr-neutral-100);
    --mkr-border:           var(--mkr-neutral-200);
    --mkr-text-primary:     var(--mkr-neutral-800);
    --mkr-text-secondary:   var(--mkr-neutral-500);
    --mkr-text-muted:       var(--mkr-neutral-400);
    --mkr-text-inverse:     var(--mkr-neutral-0);
    --mkr-sidebar-bg:       var(--mkr-neutral-900);
    --mkr-sidebar-text:     hsl(220, 15%, 85%);
    --mkr-sidebar-active:   var(--mkr-primary-500);
    --mkr-navbar-bg:        var(--mkr-neutral-0);
    --mkr-navbar-border:    var(--mkr-neutral-200);

    /* ── Glassmorphism ────────────────────────────────────────────────────── */
    --mkr-glass-bg:         rgba(255, 255, 255, 0.72);
    --mkr-glass-border:     rgba(255, 255, 255, 0.30);
    --mkr-glass-blur:       blur(14px);
    --mkr-glass-shadow:     0 8px 32px rgba(31, 38, 135, 0.10);

    /* ── Shadows ──────────────────────────────────────────────────────────── */
    --mkr-shadow-xs:  0 1px 2px rgba(0,0,0,.05);
    --mkr-shadow-sm:  0 2px 8px rgba(0,0,0,.07);
    --mkr-shadow-md:  0 4px 16px rgba(0,0,0,.09);
    --mkr-shadow-lg:  0 8px 32px rgba(0,0,0,.12);
    --mkr-shadow-xl:  0 20px 60px rgba(0,0,0,.16);

    /* ── Border Radius ────────────────────────────────────────────────────── */
    --mkr-radius-xs:  4px;
    --mkr-radius-sm:  6px;
    --mkr-radius:     8px;
    --mkr-radius-md:  10px;
    --mkr-radius-lg:  14px;
    --mkr-radius-xl:  20px;
    --mkr-radius-2xl: 28px;
    --mkr-radius-full: 9999px;

    /* ── Typography ───────────────────────────────────────────────────────── */
    --mkr-font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mkr-font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    --mkr-text-xs:    0.75rem;      /* 12px */
    --mkr-text-sm:    0.875rem;     /* 14px */
    --mkr-text-base:  1rem;         /* 16px */
    --mkr-text-lg:    1.125rem;     /* 18px */
    --mkr-text-xl:    1.25rem;      /* 20px */
    --mkr-text-2xl:   1.5rem;       /* 24px */
    --mkr-text-3xl:   1.875rem;     /* 30px */
    --mkr-text-4xl:   2.25rem;      /* 36px */
    --mkr-text-5xl:   3rem;         /* 48px */

    --mkr-font-light:    300;
    --mkr-font-normal:   400;
    --mkr-font-medium:   500;
    --mkr-font-semibold: 600;
    --mkr-font-bold:     700;
    --mkr-font-extrabold:800;

    --mkr-leading-tight:   1.25;
    --mkr-leading-snug:    1.375;
    --mkr-leading-normal:  1.5;
    --mkr-leading-relaxed: 1.625;

    /* ── Spacing ──────────────────────────────────────────────────────────── */
    --mkr-space-1:  0.25rem;   /* 4px  */
    --mkr-space-2:  0.5rem;    /* 8px  */
    --mkr-space-3:  0.75rem;   /* 12px */
    --mkr-space-4:  1rem;      /* 16px */
    --mkr-space-5:  1.25rem;   /* 20px */
    --mkr-space-6:  1.5rem;    /* 24px */
    --mkr-space-8:  2rem;      /* 32px */
    --mkr-space-10: 2.5rem;    /* 40px */
    --mkr-space-12: 3rem;      /* 48px */
    --mkr-space-16: 4rem;      /* 64px */
    --mkr-space-20: 5rem;      /* 80px */

    /* ── Layout ───────────────────────────────────────────────────────────── */
    --mkr-sidebar-width:          260px;
    --mkr-sidebar-collapsed-width: 70px;
    --mkr-navbar-height:          64px;
    --mkr-content-max-width:      1440px;

    /* ── Transitions ──────────────────────────────────────────────────────── */
    --mkr-transition-fast:   all 0.15s ease;
    --mkr-transition:        all 0.25s ease;
    --mkr-transition-slow:   all 0.40s ease;
    --mkr-transition-spring: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index Scale ────────────────────────────────────────────────────── */
    --mkr-z-below:    -1;
    --mkr-z-base:      0;
    --mkr-z-raised:   10;
    --mkr-z-dropdown: 100;
    --mkr-z-sticky:   200;
    --mkr-z-navbar:   300;
    --mkr-z-sidebar:  400;
    --mkr-z-overlay:  500;
    --mkr-z-modal:    600;
    --mkr-z-toast:    700;
    --mkr-z-tooltip:  800;
}

/* =============================================================================
   DARK MODE TOKENS
   ============================================================================= */

[data-theme="dark"],
.dark-mode {
    --mkr-bg:               hsl(222, 47%, 8%);
    --mkr-surface:          hsl(222, 47%, 12%);
    --mkr-surface-hover:    hsl(222, 47%, 16%);
    --mkr-border:           hsl(222, 30%, 22%);
    --mkr-text-primary:     hsl(220, 15%, 92%);
    --mkr-text-secondary:   hsl(220, 10%, 65%);
    --mkr-text-muted:       hsl(220, 8%, 45%);
    --mkr-text-inverse:     hsl(222, 47%, 8%);
    --mkr-sidebar-bg:       hsl(222, 47%, 10%);
    --mkr-sidebar-text:     hsl(218, 30%, 82%);
    --mkr-navbar-bg:        hsl(222, 47%, 10%);
    --mkr-navbar-border:    hsl(222, 30%, 20%);
    --mkr-glass-bg:         rgba(15, 23, 42, 0.72);
    --mkr-glass-border:     rgba(255, 255, 255, 0.08);
    --mkr-glass-shadow:     0 8px 32px rgba(0, 0, 0, 0.40);
    --mkr-shadow-sm:        0 2px 8px rgba(0,0,0,0.30);
    --mkr-shadow-md:        0 4px 16px rgba(0,0,0,0.40);
    --mkr-shadow-lg:        0 8px 32px rgba(0,0,0,0.50);
}

/* =============================================================================
   BASE RESET & GLOBALS
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

body {
    font-family: var(--mkr-font-sans);
    font-size: var(--mkr-text-base);
    line-height: var(--mkr-leading-normal);
    color: var(--mkr-text-primary);
    background-color: var(--mkr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

a {
    color: var(--mkr-primary-500);
    text-decoration: none;
    transition: var(--mkr-transition-fast);
}

a:hover {
    color: var(--mkr-primary-600);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--mkr-primary-500);
    outline-offset: 2px;
    border-radius: var(--mkr-radius-xs);
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--mkr-font-semibold);
    line-height: var(--mkr-leading-tight);
    color: var(--mkr-text-primary);
}

h1 { font-size: var(--mkr-text-4xl); }
h2 { font-size: var(--mkr-text-3xl); }
h3 { font-size: var(--mkr-text-2xl); }
h4 { font-size: var(--mkr-text-xl); }
h5 { font-size: var(--mkr-text-lg); }
h6 { font-size: var(--mkr-text-base); }

/* =============================================================================
   SCREEN-READER UTILITY
   ============================================================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.skip-link {
    position: absolute;
    top: -9999px;
    left: 0;
    background: var(--mkr-primary-500);
    color: var(--mkr-text-inverse);
    padding: var(--mkr-space-2) var(--mkr-space-4);
    font-weight: var(--mkr-font-semibold);
    border-radius: var(--mkr-radius);
    z-index: var(--mkr-z-toast);
    transition: var(--mkr-transition-fast);
}

.skip-link:focus {
    top: var(--mkr-space-4);
    left: var(--mkr-space-4);
}