/* =============================================================
   DIDC Design Tokens
   Deccan India Development Corporation Private Limited
   =============================================================
   This file is the single source of truth for brand colors,
   typography, spacing, shadows, and motion. Every component CSS
   (custom-branding.css, page-specific styles) should reference
   these variables — never hardcode the raw values.

   Brand identity (locked):
     - Primary Navy  : #1B2251   (authority, depth)
     - Primary Red   : #FF4136   (energy, CTA)
     - Accent Maroon : #6B1D3A   (gradient midpoint, hover state)
     - Soft Red Tint : #FEE8EB   (badges, hover backgrounds)
   ============================================================= */

:root {
    /* ---------- Brand Colors ---------- */
    --color-navy:        #1B2251;
    --color-navy-dark:   #0F1640;
    --color-navy-light:  #2D3561;
    --color-red:         #FF4136;
    --color-red-dark:    #D93026;
    --color-red-soft:    #FEE8EB;
    --color-maroon:      #6B1D3A;
    --color-gold:        #FF8A80;

    /* ---------- Neutrals ---------- */
    --color-white:       #FFFFFF;
    --color-bg:          #FDFDFD;
    --color-bg-alt:      #F8F9FA;
    --color-bg-section:  #F5F5F5;
    --color-border:      #E8E0D8;
    --color-border-soft: #E9ECEF;
    --color-text:        #333333;
    --color-text-muted:  #666666;
    --color-text-light:  #94A3B8;
    --color-text-faint:  rgba(10, 31, 68, 0.35);

    /* ---------- Gradients ---------- */
    --gradient-primary:  linear-gradient(135deg, #FF4136 0%, #D93026 100%);
    --gradient-navy:     linear-gradient(135deg, #1B2251 0%, #0F1640 100%);
    --gradient-hero:     linear-gradient(135deg,
                           rgba(27, 34, 81, 0.85) 0%,
                           rgba(107, 29, 58, 0.7) 50%,
                           rgba(255, 65, 54, 0.5) 100%);
    --gradient-text:     linear-gradient(135deg, #FF4136 0%, #FF8A80 100%);
    --gradient-divider:  linear-gradient(90deg, #FF4136 0%, #1B2251 100%);

    /* ---------- Typography ---------- */
    --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --font-mono:  "SFMono-Regular", Menlo, Consolas, monospace;

    --fs-xs:   12px;
    --fs-sm:   14px;
    --fs-base: 16px;
    --fs-md:   18px;
    --fs-lg:   20px;
    --fs-xl:   24px;
    --fs-2xl:  32px;
    --fs-3xl:  42px;
    --fs-4xl:  48px;
    --fs-5xl:  56px;

    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-base:    1.6;
    --lh-relaxed: 1.8;

    /* ---------- Spacing scale (4px base) ---------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* ---------- Radius ---------- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-3xl:  30px;
    --radius-pill: 999px;
    --radius-full: 50%;

    /* ---------- Shadows ---------- */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:    0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md:    0 4px 14px rgba(0, 0, 0, 0.1);
    --shadow-lg:    0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl:    0 20px 50px rgba(0, 0, 0, 0.15);
    --shadow-2xl:   0 25px 70px rgba(0, 0, 0, 0.25);
    --shadow-red-sm: 0 4px 14px rgba(255, 65, 54, 0.25);
    --shadow-red-md: 0 6px 20px rgba(255, 65, 54, 0.4);
    --shadow-red-lg: 0 15px 40px rgba(255, 65, 54, 0.5);

    /* ---------- Motion ---------- */
    --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-in-out: cubic-bezier(0.4, 0, 0.4, 1);
    --duration-fast:   150ms;
    --duration-base:   300ms;
    --duration-slow:   500ms;
    --duration-slower: 800ms;

    /* ---------- Layout ---------- */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1400px;
    --header-height: 80px;
    --z-header: 1000;
    --z-dropdown: 1001;
    --z-sticky: 1002;
    --z-modal-backdrop: 10001;
    --z-modal: 10002;
    --z-tooltip: 10003;
    --z-chatbot: 9997;
}