/* ============================================================
   DESIGN SYSTEM — CSS Custom Properties (Variables)
   Change colors/fonts here → reflects across entire app
   ============================================================ */

 :root {
    /* ── Brand Colors ─────────────────────────────── */
    --brand-primary:       #d9a12c;
    --brand-primary-hover: #bd8514;
    --brand-primary-light: rgba(217, 161, 44, 0.18);
    --brand-accent-start:  #f2c45a;
    --brand-accent-end:    #d79a26;
    --brand-accent-solid:  #e2ad38;
    --brand-accent-border: rgba(217, 161, 44, 0.32);
    --brand-accent-shadow: rgba(18, 27, 72, 0.14);
    --brand-accent-gradient: linear-gradient(135deg, #f7d06a 0%, #dfab37 58%, #c78612 100%);
    --brand-accent-gradient-soft: linear-gradient(135deg, rgba(247, 208, 106, 0.34) 0%, rgba(223, 171, 55, 0.14) 100%);
    --brand-accent-gradient-strong: linear-gradient(135deg, #f4ce65 0%, #d79b22 48%, #162353 100%);
    --brand-secondary:     #141d4c;
    --brand-secondary-hover: #0d1436;
    --brand-secondary-soft: rgba(20, 29, 76, 0.08);
    --mahakal-card-yellow: #e3a12e;
    --mahakal-card-yellow-light: #efb64b;
    --mahakal-card-yellow-deep: #d8941d;
    --mahakal-card-bg: radial-gradient(circle at top right, rgba(255, 231, 152, 0.18), transparent 24%), linear-gradient(180deg, var(--mahakal-card-yellow-light) 0%, var(--mahakal-card-yellow) 56%, var(--mahakal-card-yellow-deep) 100%);
    --mahakal-card-border: rgba(137, 89, 6, 0.18);
    --mahakal-card-shadow: 0 16px 30px rgba(20, 29, 76, 0.1);

    /* ── Background Layers ────────────────────────── */
    --bg-body:             #f6f0e1;
    --bg-card:             #fffaf0;
    --bg-elevated:         #f3e4bd;
    --bg-hover:            #edd9a5;
    --bg-active:           #e5cb8a;
    --bg-overlay:          rgba(10, 17, 47, 0.58);

    /* ── Text Colors ──────────────────────────────── */
    --text-primary:        #14204c;
    --text-secondary:      #32405f;
    --text-tertiary:       #55627f;
    --text-inverse:        #fffdf8;
    --text-brand:          #9e6a06;
    --text-on-accent-primary: #10183f;
    --text-on-accent-secondary: #22305e;
    --text-on-accent-muted: #344574;

    /* ── Semantic Colors ──────────────────────────── */
    --success:             #1f8e57;
    --success-bg:          rgba(31, 142, 87, 0.11);
    --danger:              #c14533;
    --danger-bg:           rgba(193, 69, 51, 0.1);
    --warning:             #a86b07;
    --warning-bg:          rgba(168, 107, 7, 0.12);
    --info:                #204d9a;
    --info-bg:             rgba(32, 77, 154, 0.1);

    /* ── Borders ──────────────────────────────────── */
    --border-color:        #e4cfaa;
    --border-light:        rgba(20, 29, 76, 0.08);
    --border-input:        #d6bc8d;

    /* ── Shadows ──────────────────────────────────── */
    --shadow-sm:  0 6px 16px rgba(20, 29, 76, 0.06);
    --shadow-md:  0 16px 34px rgba(20, 29, 76, 0.1);
    --shadow-lg:  0 26px 54px rgba(20, 29, 76, 0.12);
    --shadow-xl:  0 36px 72px rgba(10, 17, 47, 0.18);
    --shadow-glow: 0 0 24px rgba(217, 161, 44, 0.22);

    /* ── Spacing Scale ────────────────────────────── */
    --space-xs:   0.25rem;   /* 4px */
    --space-sm:   0.5rem;    /* 8px */
    --space-md:   1rem;      /* 16px */
    --space-lg:   1.5rem;    /* 24px */
    --space-xl:   2rem;      /* 32px */
    --space-2xl:  3rem;      /* 48px */

    /* ── Border Radius ────────────────────────────── */
    --radius-sm:  10px;
    --radius-md:  16px;
    --radius-lg:  24px;
    --radius-xl:  32px;
    --radius-full: 9999px;

    /* ── Typography ───────────────────────────────── */
    --font-main:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Marcellus', 'Times New Roman', serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 0.875rem;   /* 14px — mobile optimized */
    --text-md:   1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */

    --weight-normal:  400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;

    --leading-tight:  1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

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

    /* ── Layout ───────────────────────────────────── */
    --sidebar-width:     280px;
    --sidebar-collapsed: 0px;
    --header-height:     64px;
    --bottom-nav-height: 60px;
    --max-content-width: 480px;    /* Mobile-app feel */
    --safe-area-bottom:  env(safe-area-inset-bottom, 0px);

    /* ── Z-Index Scale ────────────────────────────── */
    --z-sidebar:   1000;
    --z-header:    900;
    --z-overlay:   1100;
    --z-modal:     1200;
    --z-toast:     1300;
    --z-bottom-nav: 950;
}