/* ==========================================================================
   OORKANAKU Village Governance ERP - CSS Custom Properties
   Color Palette, Typography, Spacing, Shadows, Transitions
   ========================================================================== */

:root {
  /* ── Color Palette ── */
  --ok-saffron:            #FF6B00;
  --ok-saffron-hover:      #E55A00;
  --ok-saffron-active:     #CC4E00;
  --ok-saffron-light:      #FFF3E6;
  --ok-saffron-100:        #FFE0CC;
  --ok-saffron-200:        #FFC299;
  --ok-saffron-300:        #FFA366;
  --ok-saffron-400:        #FF8533;
  --ok-saffron-500:        #FF6B00;
  --ok-saffron-600:        #E55A00;
  --ok-saffron-700:        #CC4E00;
  --ok-saffron-800:        #993A00;
  --ok-saffron-900:        #662700;

  --ok-deep-saffron:       #E55A00;
  --ok-temple-gold:        #FFD700;
  --ok-temple-gold-light:  #FFF8DC;
  --ok-temple-gold-dark:   #DAA520;
  --ok-sacred-red:         #CC0000;
  --ok-sacred-red-light:   #FFE0E0;
  --ok-deep-maroon:        #800020;
  --ok-deep-maroon-light:  #F2E0E6;
  --ok-village-green:      #2E7D32;
  --ok-village-green-light:#E8F5E9;
  --ok-sky-blue:           #1565C0;
  --ok-sky-blue-light:     #E3F2FD;

  /* ── Neutrals ── */
  --ok-white:              #FFFFFF;
  --ok-off-white:          #FAFAFA;
  --ok-gray-50:            #F8F9FA;
  --ok-gray-100:           #F1F3F5;
  --ok-gray-200:           #E9ECEF;
  --ok-gray-300:           #DEE2E6;
  --ok-gray-400:           #CED4DA;
  --ok-gray-500:           #ADB5BD;
  --ok-gray-600:           #868E96;
  --ok-gray-700:           #495057;
  --ok-gray-800:           #343A40;
  --ok-gray-900:           #212529;
  --ok-black:              #000000;

  /* ── Semantic Colors ── */
  --ok-success:            #2E7D32;
  --ok-success-light:      #E8F5E9;
  --ok-success-dark:       #1B5E20;
  --ok-danger:             #CC0000;
  --ok-danger-light:       #FFE0E0;
  --ok-danger-dark:        #8B0000;
  --ok-warning:            #FF6B00;
  --ok-warning-light:      #FFF3E6;
  --ok-warning-dark:       #CC4E00;
  --ok-info:               #1565C0;
  --ok-info-light:         #E3F2FD;
  --ok-info-dark:          #0D47A1;

  /* ── Light Mode (Default) ── */
  --ok-bg-primary:         #FFFFFF;
  --ok-bg-secondary:       #F8F9FA;
  --ok-bg-tertiary:        #F1F3F5;
  --ok-bg-sidebar:         #1A1A2E;
  --ok-bg-sidebar-hover:   #16213E;
  --ok-bg-navbar:          rgba(255, 255, 255, 0.85);
  --ok-bg-card:            #FFFFFF;
  --ok-bg-input:           #FFFFFF;
  --ok-bg-hover:           #F1F3F5;
  --ok-bg-active:          #FFF3E6;
  --ok-bg-code:            #F1F3F5;
  --ok-bg-overlay:         rgba(0, 0, 0, 0.5);
  --ok-bg-glass:           rgba(255, 255, 255, 0.25);

  --ok-text-primary:       #212529;
  --ok-text-secondary:     #495057;
  --ok-text-tertiary:      #868E96;
  --ok-text-muted:         #ADB5BD;
  --ok-text-inverse:       #FFFFFF;
  --ok-text-link:          #FF6B00;
  --ok-text-link-hover:    #E55A00;
  --ok-text-sidebar:       #ADB5BD;
  --ok-text-sidebar-active:#FFFFFF;

  --ok-border-primary:     #DEE2E6;
  --ok-border-secondary:   #E9ECEF;
  --ok-border-focus:       #FF6B00;
  --ok-border-input:       #CED4DA;
  --ok-border-card:        #E9ECEF;

  /* ── Dark Mode ── */
  .dark-mode {
    --ok-bg-primary:       #0F0F1A;
    --ok-bg-secondary:     #1A1A2E;
    --ok-bg-tertiary:      #16213E;
    --ok-bg-sidebar:       #0A0A14;
    --ok-bg-sidebar-hover: #1A1A2E;
    --ok-bg-navbar:        rgba(15, 15, 26, 0.9);
    --ok-bg-card:          #1A1A2E;
    --ok-bg-input:         #16213E;
    --ok-bg-hover:         #16213E;
    --ok-bg-active:        rgba(255, 107, 0, 0.15);
    --ok-bg-code:          #16213E;
    --ok-bg-overlay:       rgba(0, 0, 0, 0.7);
    --ok-bg-glass:         rgba(26, 26, 46, 0.6);

    --ok-text-primary:     #E9ECEF;
    --ok-text-secondary:   #CED4DA;
    --ok-text-tertiary:    #ADB5BD;
    --ok-text-muted:       #868E96;
    --ok-text-inverse:     #212529;
    --ok-text-link:        #FF8533;
    --ok-text-link-hover:  #FFA366;
    --ok-text-sidebar:     #868E96;
    --ok-text-sidebar-active:#FFFFFF;

    --ok-border-primary:   #2D2D44;
    --ok-border-secondary: #232340;
    --ok-border-focus:     #FF6B00;
    --ok-border-input:     #2D2D44;
    --ok-border-card:      #2D2D44;

    --ok-saffron-light:    rgba(255, 107, 0, 0.15);
    --ok-temple-gold-light:rgba(255, 215, 0, 0.1);
    --ok-sacred-red-light: rgba(204, 0, 0, 0.15);
    --ok-village-green-light:rgba(46, 125, 50, 0.15);
    --ok-sky-blue-light:   rgba(21, 101, 192, 0.15);
    --ok-success-light:    rgba(46, 125, 50, 0.15);
    --ok-danger-light:     rgba(204, 0, 0, 0.15);
    --ok-warning-light:    rgba(255, 107, 0, 0.15);
    --ok-info-light:       rgba(21, 101, 192, 0.15);
  }

  /* ── Typography Scale ── */
  --ok-font-family:        'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Noto Sans Tamil', sans-serif;
  --ok-font-heading:       'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --ok-font-mono:          'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  --ok-font-tamil:         'Noto Sans Tamil', 'Latha', sans-serif;

  --ok-text-xs:            0.75rem;
  --ok-text-sm:            0.8125rem;
  --ok-text-base:          0.875rem;
  --ok-text-md:            1rem;
  --ok-text-lg:            1.125rem;
  --ok-text-xl:            1.25rem;
  --ok-text-2xl:           1.5rem;
  --ok-text-3xl:           1.875rem;
  --ok-text-4xl:           2.25rem;
  --ok-text-5xl:           3rem;

  --ok-leading-none:       1;
  --ok-leading-tight:      1.25;
  --ok-leading-snug:       1.375;
  --ok-leading-normal:     1.5;
  --ok-leading-relaxed:    1.625;
  --ok-leading-loose:      2;

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

  --ok-tracking-tight:     -0.025em;
  --ok-tracking-normal:    0;
  --ok-tracking-wide:      0.025em;

  /* ── Spacing Scale ── */
  --ok-space-0:            0;
  --ok-space-px:           1px;
  --ok-space-0-5:          0.125rem;
  --ok-space-1:            0.25rem;
  --ok-space-1-5:          0.375rem;
  --ok-space-2:            0.5rem;
  --ok-space-2-5:          0.625rem;
  --ok-space-3:            0.75rem;
  --ok-space-3-5:          0.875rem;
  --ok-space-4:            1rem;
  --ok-space-5:            1.25rem;
  --ok-space-6:            1.5rem;
  --ok-space-7:            1.75rem;
  --ok-space-8:            2rem;
  --ok-space-9:            2.25rem;
  --ok-space-10:           2.5rem;
  --ok-space-12:           3rem;
  --ok-space-14:           3.5rem;
  --ok-space-16:           4rem;
  --ok-space-20:           5rem;
  --ok-space-24:           6rem;
  --ok-space-32:           8rem;

  /* ── Border Radius ── */
  --ok-radius-none:        0;
  --ok-radius-sm:          0.25rem;
  --ok-radius-md:          0.375rem;
  --ok-radius-lg:          0.5rem;
  --ok-radius-xl:          0.75rem;
  --ok-radius-2xl:         1rem;
  --ok-radius-3xl:         1.5rem;
  --ok-radius-full:        9999px;

  /* ── Shadows ── */
  --ok-shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.05);
  --ok-shadow-md:          0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --ok-shadow-lg:          0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --ok-shadow-xl:          0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  --ok-shadow-2xl:         0 25px 50px -12px rgba(0, 0, 0, 0.2);
  --ok-shadow-inner:       inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --ok-shadow-glow:        0 0 20px rgba(255, 107, 0, 0.3);
  --ok-shadow-glow-gold:   0 0 20px rgba(255, 215, 0, 0.3);
  --ok-shadow-glass:       0 8px 32px rgba(0, 0, 0, 0.08);
  --ok-shadow-card:        0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --ok-shadow-card-hover:  0 10px 40px rgba(0, 0, 0, 0.12);
  --ok-shadow-sidebar:     2px 0 8px rgba(0, 0, 0, 0.1);
  --ok-shadow-navbar:      0 1px 3px rgba(0, 0, 0, 0.06);
  --ok-shadow-dropdown:    0 10px 40px rgba(0, 0, 0, 0.15);
  --ok-shadow-modal:       0 25px 50px rgba(0, 0, 0, 0.25);
  --ok-shadow-tooltip:     0 4px 12px rgba(0, 0, 0, 0.15);

  .dark-mode {
    --ok-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.3);
    --ok-shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --ok-shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --ok-shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --ok-shadow-glass:     0 8px 32px rgba(0, 0, 0, 0.3);
    --ok-shadow-card:      0 1px 3px rgba(0, 0, 0, 0.3);
    --ok-shadow-card-hover:0 10px 40px rgba(0, 0, 0, 0.4);
    --ok-shadow-dropdown:  0 10px 40px rgba(0, 0, 0, 0.5);
    --ok-shadow-modal:     0 25px 50px rgba(0, 0, 0, 0.6);
  }

  /* ── Z-Index Scale ── */
  --z-behind:              -1;
  --z-base:                0;
  --z-raised:              10;
  --z-dropdown:            100;
  --z-sticky:              200;
  --z-navbar:              300;
  --z-sidebar:             400;
  --z-overlay:             500;
  --z-modal:               600;
  --z-popover:             700;
  --z-tooltip:             800;
  --z-toast:               900;
  --z-top:                 9999;

  /* ── Transitions ── */
  --ok-transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ok-transition-base:    250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ok-transition-slow:    350ms cubic-bezier(0.4, 0, 0.2, 1);
  --ok-transition-slower:  500ms cubic-bezier(0.4, 0, 0.2, 1);
  --ok-transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ok-transition-bounce:  600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --ok-ease-in:            cubic-bezier(0.4, 0, 1, 1);
  --ok-ease-out:           cubic-bezier(0, 0, 0.2, 1);
  --ok-ease-in-out:        cubic-bezier(0.4, 0, 0.2, 1);
  --ok-ease-bounce:        cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Glassmorphism ── */
  --ok-glass-bg:           rgba(255, 255, 255, 0.6);
  --ok-glass-border:       rgba(255, 255, 255, 0.3);
  --ok-glass-blur:         16px;
  --ok-glass-saturate:     180%;

  .dark-mode {
    --ok-glass-bg:         rgba(26, 26, 46, 0.7);
    --ok-glass-border:     rgba(255, 255, 255, 0.08);
  }

  /* ── Sidebar Dimensions ── */
  --ok-sidebar-width:      260px;
  --ok-sidebar-mini-width: 72px;
  --ok-sidebar-collapsed:  0px;
  --ok-navbar-height:      64px;
  --ok-footer-height:      48px;
  --ok-breadcrumb-height:  44px;
}

/* ── Root Resets ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--ok-font-family);
  font-size: var(--ok-text-base);
  line-height: var(--ok-leading-normal);
  color: var(--ok-text-primary);
  background-color: var(--ok-bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}