/* ============================================================
   Torgify — Design System Variables
   Brand colors derived from logo (orange-red gradient)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
    color-scheme: light;

    /* ── Brand Colors (from logo) ─────────────────────── */
    --primary:        #FF6B00;   /* Orange — main brand     */
    --primary-dark:   #E55A00;   /* Darker orange — hover   */
    --primary-light:  #FF8C38;   /* Lighter orange          */
    --accent:         #FFB800;   /* Gold/Yellow — secondary  */
    --accent-dark:    #E6A500;   /* Darker gold             */
    --danger:         #E53935;   /* Red — alerts/delete     */
    --danger-dark:    #C62828;   /* Darker red              */
    --success:        #10B981;   /* Green                   */
    --success-dark:   #059669;   /* Darker green            */
    --warning:        #F59E0B;   /* Amber                   */
    --info:           #3B82F6;   /* Blue                    */

    /* ── Accessible text colors for light bg contrast ── */
    --primary-text:   #CA3E00;
    --success-text:   #065F46;
    --danger-text:    #B91C1C;
    --warning-text:   #92400E;

    /* ── Background & Surface (Light Mode) ───────────── */
    --bg:             #F8FAFC;   /* Slate 50 — clean bright bg  */
    --bg-2:           #F1F5F9;   /* Slate 100                   */
    --card-bg:        #FFFFFF;   /* Pure white cards            */
    --card-bg-2:      #F8FAFC;   /* White elevated card         */
    --sidebar-bg:     #FFFFFF;   /* Sidebar                     */
    --header-bg:      rgba(255,255,255,0.92); /* Glassy white header */

    /* ── Form & UI Surface ───────────────────────────── */
    --form-bg:        #F1F5F9;
    --form-bg-focus:  rgba(255,107,0,0.06);
    --surface:        #FFFFFF;
    --surface-2:      #F1F5F9;
    --surface-subtle: rgba(15,23,42,0.04);
    --surface-hover:  rgba(15,23,42,0.06);
    --google-btn-bg:  #F8FAFC;
    --google-btn-border: rgba(15,23,42,0.12);
    --google-btn-hover:  #EFF2F7;
    --toast-success-text: #065F46;
    --toast-error-text:   #991B1B;
    --toast-info-text:    #1E40AF;
    --toast-warning-text: #92400E;
    --shadow-auth-card:   0 8px 32px rgba(15,23,42,0.10), 0 0 0 1px rgba(255,107,0,0.06);

    /* ── Border ──────────────────────────────────────── */
    --border:         rgba(255,107,0,0.12);
    --border-hover:   rgba(255,107,0,0.3);
    --border-active:  rgba(255,107,0,0.5);
    --border-muted:   rgba(15,23,42,0.06);

    /* ── Text ────────────────────────────────────────── */
    --text-main:      #0F172A;   /* Slate 900 — high contrast   */
    --text-sub:       #334155;   /* Slate 700                   */
    --text-muted:     #57657A;   /* Slate 500                   */
    --text-faint:     #78889B;   /* Slate 400                   */

    /* ── Gradients ───────────────────────────────────── */
    --grad-brand:     linear-gradient(135deg, #FF6B00, #E53935);
    --grad-gold:      linear-gradient(135deg, #FFB800, #FF6B00);
    --grad-card:      linear-gradient(145deg, #FFFFFF, #F8FAFC);
    --grad-hero:      linear-gradient(135deg, rgba(255,107,0,0.08), rgba(229,57,53,0.04), transparent);

    /* ── Shadows ─────────────────────────────────────── */
    --shadow-sm:      0 1px 3px rgba(15,23,42,0.05);
    --shadow-md:      0 4px 16px rgba(15,23,42,0.08);
    --shadow-lg:      0 8px 32px rgba(15,23,42,0.12);
    --shadow-brand:   0 4px 20px rgba(255,107,0,0.15);
    --shadow-card:    0 2px 12px rgba(15,23,42,0.04);

    /* ── Glow Effects ────────────────────────────────── */
    --glow-primary:   0 0 20px rgba(255,107,0,0.3);
    --glow-accent:    0 0 20px rgba(255,184,0,0.3);

    /* ── Border Radius ───────────────────────────────── */
    --radius-sm:      6px;
    --radius-md:      12px;
    --radius-lg:      18px;
    --radius-xl:      24px;
    --radius-full:    9999px;

    /* ── Spacing ─────────────────────────────────────── */
    --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;

    /* ── Typography ──────────────────────────────────── */
    --font:           'Outfit', sans-serif;
    --text-xs:        0.75rem;
    --text-sm:        0.875rem;
    --text-base:      1rem;
    --text-lg:        1.125rem;
    --text-xl:        1.25rem;
    --text-2xl:       1.5rem;
    --text-3xl:       1.875rem;
    --text-4xl:       2.25rem;

    /* ── Transitions ─────────────────────────────────── */
    --transition:     all 0.2s ease;
    --transition-slow: all 0.35s ease;

    /* ── Z-Index Scale ───────────────────────────────── */
    --z-base:    1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;

    /* ── Layout ──────────────────────────────────────── */
    --header-height:   64px;
    --sidebar-width:   260px;
    --max-width:       1400px;
    --content-width:   1200px;
}