/* ============================================
   Devalay Design Tokens
   ============================================
   Centralized design system for the Devalay platform.
   Theme: Minimalist Sanatan Dharma

   Usage: var(--token-name)
   All CSS files should reference these tokens
   instead of hardcoding color/spacing values.
   ============================================ */

:root {
    /* ── Brand Colors (Saffron / Hindu theme) ─────────── */
    --brand-primary: #FF8A00;        /* Saffron - primary actions, active states */
    --brand-secondary: #FFB040;      /* Light saffron - secondary buttons, hover */
    --brand-accent: #FE9F1E;         /* Warm orange - accent elements, pills */
    --brand-dark: #FD8A2C;           /* Deep saffron - emphasis, icons */
    --brand-light: #FFF8F0;          /* Cream - light brand backgrounds */
    --brand-lighter: #FFF7EB;        /* Lighter cream - subtle brand tint */
    --brand-bg: #FDF2EE;             /* Lightest brand - card/pill backgrounds */
    --brand-border: #FFE0D4;         /* Soft orange - brand-tinted borders */

    /* ── Text Colors ──────────────────────────────────── */
    --text-primary: #14191E;         /* Dark navy - headings, primary text */
    --text-secondary: #333333;       /* Dark gray - body text, labels */
    --text-tertiary: #555151;        /* Medium gray - descriptions, captions */
    --text-muted: #6B7280;           /* Muted gray - helper text, metadata */
    --text-placeholder: #9CA3AF;     /* Light gray - placeholder, disabled */
    --text-light: #999999;           /* Lighter gray - timestamps, counts */
    --text-inverse: #FFFFFF;         /* White - text on dark backgrounds */
    --text-link: #000000;            /* Black - default link color */
    --text-dark-brown: #4B2E2E;      /* Dark brown - special emphasis */

    /* ── Background Colors ────────────────────────────── */
    --bg-primary: #FFFFFF;           /* White - main backgrounds */
    --bg-secondary: #FCFCF5;         /* Warm off-white - page backgrounds */
    --bg-tertiary: #F3F4F6;          /* Light gray - card/input backgrounds */
    --bg-light: #FAFAFA;             /* Very light gray - subtle sections */
    --bg-hover: #FFF8F0;             /* Light cream - hover states */
    --bg-skeleton: #f0f0f0;          /* Skeleton loading base */
    --bg-skeleton-pulse: #e0e0e0;    /* Skeleton loading pulse */
    --bg-overlay: rgba(0, 0, 0, 0.5);  /* Modal/overlay backdrop */
    --bg-overlay-light: rgba(0, 0, 0, 0.36); /* Light overlay */
    --bg-input-loader: rgba(0, 0, 0, 0.36);  /* Input loading overlay */

    /* ── Border Colors ────────────────────────────────── */
    --border-primary: #E8E8E8;       /* Light gray - default borders */
    --border-secondary: #D9D9D9;     /* Medium gray - card borders */
    --border-input: #D0D5DD;         /* Gray - input field borders */
    --border-dark: #14191E;          /* Dark - strong borders */
    --border-light: #EEEEEE;         /* Very light - subtle dividers */
    --border-subtle: rgba(0, 0, 0, 0.09);  /* Near-invisible borders */
    --border-focus: #FF8A00;         /* Brand - focused input borders */

    /* ── Status Colors ────────────────────────────────── */
    --color-success: #059669;        /* Green - success states */
    --color-success-light: #D1FAE5;  /* Light green - success backgrounds */
    --color-error: #dc2626;          /* Red - error states */
    --color-error-light: #FEE2E2;    /* Light red - error backgrounds */
    --color-warning: #D97706;        /* Amber - warning states */
    --color-warning-light: #FEF3C7;  /* Light amber - warning backgrounds */
    --color-info: #667EEA;           /* Blue - info states */
    --color-info-light: #E3F2FD;     /* Light blue - info backgrounds */

    /* ── Shadow Tokens ────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);
    --shadow-toast: 0 0 20px rgba(0, 0, 0, 0.3);
    --shadow-brand: 0 4px 12px rgba(254, 159, 30, 0.25);

    /* ── Typography ───────────────────────────────────── */
    --font-primary: 'Sarabun', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-4xl: 32px;
    --text-5xl: 36px;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.8;

    /* ── Spacing Scale ────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* ── Border Radius ────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 20px;
    --radius-card: 45px;
    --radius-full: 50%;

    /* ── Z-Index Scale ────────────────────────────────── */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-modal-backdrop: 1000;
    --z-modal: 1001;
    --z-toast: 2000;
    --z-tooltip: 3000;
    --z-navbar: 5000;

    /* ── Breakpoints (reference only — can't use vars in @media) ──
       --bp-mobile:  480px    phone
       --bp-tablet:  768px    tablet / small laptop
       --bp-desktop: 1050px   desktop
       --bp-wide:    1920px   large monitors
    ─────────────────────────────────────────────────── */

    /* ── Component Colors ────────────────────────────── */
    --color-mention: #1877f2;        /* Blue - @mentions, hashtag links */
    --color-heart: #ed4956;          /* Red - liked/heart icons */
    --brand-gradient: linear-gradient(135deg, #ffa600 0%, #ff6b00 100%);

    /* ── Transitions ──────────────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ── Card Tokens (component-specific) ─────────────── */
    --card-radius: 45px;
    --card-radius-sm: 20px;
    --card-border: 0.889px solid var(--border-secondary);
    --card-bg: var(--bg-primary);
    --card-img-bg: var(--bg-skeleton);
    --card-img-ratio: 4 / 3;
    --card-stats-border: 0.5px solid rgba(172, 169, 169, 0.50);
    --stat-icon-size: 24px;
}