/*
 * Shri OM Darbar - Master Design System
 * Version: 2.0 (Architectural Upgrade)
 */

:root {
  color-scheme: light;

  /* ==========================================================
     LAYER 1: PRIMITIVES (The Restrained Mandir Palette)
     ========================================================== */
  
  /* Saffron: Devotional emphasis, primary CTAs */
  --od-saffron-wash: #FCECE8;
  --od-saffron-base: #DE5B3C;
  --od-saffron-deep: #B8462B;

  /* Maroon: Institutional authority, headers, footers, dark sections */
  --od-maroon-wash:  #F7E9E9;
  --od-maroon-base:  #7A1E22;
  --od-maroon-deep:  #4F1014;

  /* Gold: Ceremonial accents, restricted to special markers */
  --od-gold-wash:    #FDF8ED;
  --od-gold-base:    #C69C38;

  /* Sandstone: Warm architectural canvas and subtle borders */
  --od-sand-canvas:  #FAF9F6;
  --od-sand-surface: #F4F0EA;
  --od-sand-border:  #E8E2DA;
  --od-sand-strong:  #D2C8BC;

  /* Ink: High-contrast typography with warm undertones */
  --od-ink-muted:    #8A7D78;
  --od-ink-secondary:#5A504C;
  --od-ink-primary:  #2A2422;

  /* Pure */
  --od-white:        #FFFFFF;
  --od-transparent:  transparent;

  /* Status Primitives (Warm, earth-toned variants) */
  --od-status-success-bg:     #E9F2EC;
  --od-status-success-border: #C2D9CB;
  --od-status-success-text:   #1F402B;
  
  --od-status-warning-bg:     #FFF3E0;
  --od-status-warning-border: #E6C28A;
  --od-status-warning-text:   #663D00;
  
  --od-status-danger-bg:      #FCE8E8;
  --od-status-danger-border:  #E6B8B8;
  --od-status-danger-text:    #5E1C1C;
  
  --od-status-info-bg:        #E6F2F5;
  --od-status-info-border:    #B8D6E0;
  --od-status-info-text:      #1D3D47;


  /* ==========================================================
     LAYER 2: SEMANTIC SURFACES & COLORS
     ========================================================== */
  
  /* Backgrounds */
  --od-bg-page:             var(--od-sand-canvas);
  --od-bg-surface:          var(--od-white);
  --od-bg-surface-raised:   var(--od-sand-surface);
  --od-bg-inverse:          var(--od-maroon-base);
  --od-bg-inverse-deep:     var(--od-maroon-deep);
  --od-bg-brand:            var(--od-saffron-wash);

  /* Typography */
  --od-text-primary:        var(--od-ink-primary);
  --od-text-secondary:      var(--od-ink-secondary);
  --od-text-muted:          var(--od-ink-muted);
  --od-text-inverse:        var(--od-white);
  --od-text-inverse-muted:  var(--od-maroon-wash);
  --od-text-brand:          var(--od-maroon-base);
  --od-text-accent:         var(--od-saffron-base);

  /* Borders & Dividers */
  --od-border-subtle:       var(--od-sand-border);
  --od-border-default:      var(--od-sand-strong);
  --od-border-inverse:      var(--od-maroon-deep);
  --od-border-focus:        var(--od-saffron-base);

  /* Links */
  --od-link-default:        var(--od-saffron-deep);
  --od-link-hover:          var(--od-maroon-base);
  --od-link-inverse:        var(--od-saffron-wash);
  --od-link-inverse-hover:  var(--od-white);

  /* ==========================================================
     LAYER 3: ACTION & FORM TOKENS
     ========================================================== */
  
  /* Primary Action (Saffron) */
  --od-action-primary-bg:         var(--od-saffron-base);
  --od-action-primary-hover:      var(--od-saffron-deep);
  --od-action-primary-text:       var(--od-white);
  
  /* Authority Action (Maroon) */
  --od-action-authority-bg:       var(--od-maroon-base);
  --od-action-authority-hover:    var(--od-maroon-deep);
  --od-action-authority-text:     var(--od-white);

  /* Secondary Action (Outlined) */
  --od-action-secondary-bg:       var(--od-transparent);
  --od-action-secondary-border:   var(--od-sand-strong);
  --od-action-secondary-hover-bg: var(--od-sand-surface);
  --od-action-secondary-text:     var(--od-ink-primary);

  /* Disabled State */
  --od-action-disabled-bg:        var(--od-sand-border);
  --od-action-disabled-text:      var(--od-ink-muted);

  /* Forms */
  --od-form-bg:                   var(--od-white);
  --od-form-border:               var(--od-sand-strong);
  --od-form-border-hover:         var(--od-ink-muted);
  --od-form-border-focus:         var(--od-saffron-base);
  --od-form-text:                 var(--od-ink-primary);
  --od-form-placeholder:          var(--od-ink-muted);


  /* ==========================================================
     LAYER 4: TYPOGRAPHY ARCHITECTURE
     ========================================================== */
  
  --od-font-sans: 'DM Sans', system-ui, sans-serif;
  --od-font-deva: 'Noto Sans Devanagari', 'DM Sans', system-ui, sans-serif;

  --od-weight-regular: 400;
  --od-weight-medium:  500;
  --od-weight-bold:    700;

  --od-leading-none:    1;
  --od-leading-tight:   1.2;
  --od-leading-snug:    1.4;
  --od-leading-base:    1.6;
  --od-leading-relaxed: 1.8;

  /* Fluid Type Scale (Responsive without media queries) */
  --od-type-xs:   0.875rem;                                /* 14px */
  --od-type-sm:   1rem;                                    /* 16px */
  --od-type-base: 1.125rem;                                /* 18px */
  --od-type-h4:   clamp(1.25rem, 2vw + 0.75rem, 1.5rem);   /* 20px-24px */
  --od-type-h3:   clamp(1.5rem, 3vw + 0.75rem, 2rem);      /* 24px-32px */
  --od-type-h2:   clamp(1.75rem, 4vw + 0.75rem, 2.5rem);   /* 28px-40px */
  --od-type-h1:   clamp(2rem, 5vw + 1rem, 3.5rem);         /* 32px-56px */


  /* ==========================================================
     LAYER 5: SPACING & RHYTHM (4px Base Unit)
     ========================================================== */
  
  --od-space-1:  0.25rem;  /* 4px */
  --od-space-2:  0.5rem;   /* 8px */
  --od-space-3:  0.75rem;  /* 12px */
  --od-space-4:  1rem;     /* 16px */
  --od-space-6:  1.5rem;   /* 24px */
  --od-space-8:  2rem;     /* 32px */
  --od-space-12: 3rem;     /* 48px */
  --od-space-16: 4rem;     /* 64px */
  --od-space-24: 6rem;     /* 96px */

  /* Semantic Layout Rhythms */
  --od-layout-section-compact:  var(--od-space-8);
  --od-layout-section-standard: var(--od-space-16);
  --od-layout-section-spacious: var(--od-space-24);


  /* ==========================================================
     LAYER 6: CONTAINERS & LAYOUT
     ========================================================== */
  
  --od-container-content: 800px;  /* Optimal reading width */
  --od-container-default: 1200px; /* Standard UI width */
  --od-container-wide:    1440px; /* Galleries, masonry */
  
  --od-gutter-fluid: clamp(1rem, 4vw, 2rem);


  /* ==========================================================
     LAYER 7: RADIUS & ELEVATION
     ========================================================== */
  
  /* Architectural Radius (Restrained, grounded, flat edges preferred) */
  --od-radius-none: 0px;
  --od-radius-sm:   2px;  /* Checkboxes, small badges */
  --od-radius-md:   4px;  /* Buttons, inputs, standard UI */
  --od-radius-lg:   8px;  /* Images, embedded media */
  --od-radius-pill: 9999px;

  /* Elevation (Prefer surface changes and borders over shadows) */
  --od-elevation-none:     none;
  --od-elevation-floating: 0 4px 12px rgba(42, 36, 34, 0.08);
  --od-elevation-modal:    0 16px 48px rgba(42, 36, 34, 0.12);


  /* ==========================================================
     LAYER 8: MOTION & INTERACTION
     ========================================================== */
  
  --od-duration-instant:  0ms;
  --od-duration-fast:     150ms;
  --od-duration-standard: 250ms;
  --od-duration-slow:     400ms;

  --od-ease-standard:     cubic-bezier(0.4, 0, 0.2, 1);
  --od-ease-entrance:     cubic-bezier(0.0, 0, 0.2, 1);
  --od-ease-exit:         cubic-bezier(0.4, 0, 1, 1);


  /* ==========================================================
     LAYER 9: Z-INDEX ARCHITECTURE
     ========================================================== */
  
  --od-z-base:      1;
  --od-z-sticky:    100;
  --od-z-dropdown:  200;
  --od-z-overlay:   300;
  --od-z-modal:     400;
  --od-z-toast:     500;


  /* ==========================================================
     LEGACY COMPATIBILITY (DEPRECATED - DO NOT USE FOR NEW UI)
     ========================================================== */
  --od-saffron:           var(--od-saffron-base);
  --od-saffron-light:     var(--od-saffron-wash);
  --od-maroon:            var(--od-maroon-base);
  --od-gold:              var(--od-gold-base);
  --od-bg-base:           var(--od-bg-page);
  --od-cream:             var(--od-bg-page);
  --od-text:              var(--od-text-primary);
  --od-text-main:         var(--od-text-primary);
  --od-text-light:        var(--od-text-secondary);
  --od-text-muted:        var(--od-text-secondary);
  --od-brown:             var(--od-text-primary);
  --od-border:            var(--od-border-subtle);
  --od-border-light:      var(--od-border-subtle);
  --od-spacing-sm:        var(--od-space-2);
  --od-spacing-md:        var(--od-space-4);
  --od-shadow:            var(--od-elevation-floating);
  --od-shadow-sm:         var(--od-elevation-floating);
  --od-transition-fast:   var(--od-duration-fast) var(--od-ease-standard);
  --od-transition-normal: var(--od-duration-standard) var(--od-ease-standard);
  --od-transition-slow:   var(--od-duration-slow) var(--od-ease-standard);
  --od-radius-full:       var(--od-radius-pill);
}

/* ==========================================================
   GLOBAL STYLES & ACCESSIBILITY RESETS
   ========================================================== */

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

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

body {
    font-family: var(--od-font-sans);
    color: var(--od-text-primary);
    background-color: var(--od-bg-page);
    line-height: var(--od-leading-base);
    font-size: var(--od-type-sm);
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* Hindi Typography Support (Preserves line-height metrics for Devanagari) */
[lang="hi"] body {
    font-family: var(--od-font-deva);
    line-height: var(--od-leading-relaxed);
}

/* Focus Architecture */
:focus-visible {
    outline: 2px solid var(--od-border-focus);
    outline-offset: 2px;
}
/* Inverse Focus for dark sections */
.theme-inverse :focus-visible,
[data-theme="inverse"] :focus-visible {
    outline-color: var(--od-white);
}

/* Typography Hierarchy (Logical Properties) */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--od-weight-bold);
    color: var(--od-text-primary);
    line-height: var(--od-leading-tight);
    margin-block-end: var(--od-space-4);
}

h1 { font-size: var(--od-type-h1); }
h2 { font-size: var(--od-type-h2); }
h3 { font-size: var(--od-type-h3); }
h4 { font-size: var(--od-type-h4); }
h5 { font-size: var(--od-type-base); }
h6 { font-size: var(--od-type-sm); }

p {
    margin-block-end: var(--od-space-4);
}

/* Semantic Links */
a {
    color: var(--od-link-default);
    text-decoration: none;
    transition: color var(--od-duration-fast) var(--od-ease-standard);
}
a:hover {
    color: var(--od-link-hover);
}

/* Layout Architecture */
.container {
    width: 100%;
    max-width: var(--od-container-default);
    margin-inline: auto;
    padding-inline: var(--od-gutter-fluid);
}

/* Semantic Components */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-2);
    font-size: var(--od-type-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--od-text-accent);
    font-weight: var(--od-weight-medium);
    margin-block-end: var(--od-space-2);
}

.section-title em {
    font-style: normal;
    color: var(--od-gold-base);
}

/* 
 * Progressive Enhancement Reveal Animation 
 * Only active when Javascript explicitly handles it (preventing invisible content on failure)
 */
[data-reveal] {
    transition: 
        opacity var(--od-duration-slow) var(--od-ease-entrance), 
        transform var(--od-duration-slow) var(--od-ease-entrance);
}

/* If JS fails or takes time, elements remain visible by default via @media (scripting: none) fallback */
@media (scripting: none) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* JS adds classes to handle state */
[data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(24px);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    [data-reveal]:not(.is-revealed) {
        opacity: 1;
        transform: none;
    }
}

/* Accessibility: Screen Reader Utilities */
.visually-hidden,
.bg-visually-hidden { /* Legacy class retained for HTML compatibility */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}