/* ============================================
   DESIGN TOKENS
   All CSS custom properties: colors (brand + semantic),
   spacing scale, radii, shadows, transitions.
   This is the one file to open to change any color or
   spacing value used anywhere else in the app.
   Loaded FIRST — everything else depends on these variables.
   ============================================ */
/* ============================================
   WHITE-LABEL DESIGN SYSTEM
   Single source of truth
   Colors are overridden per-client via CSS variables set in base.html
   ============================================ */

/* --------------------------------------------
   FONT FACE - Local sohne-var
-------------------------------------------- */
@font-face {
    font-family: 'sohne-var';
    src: url('/static/fonts/TestSohne-Extraleicht.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'sohne-var';
    src: url('/static/fonts/TestSohne-Extrafett.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------
   CSS VARIABLES
-------------------------------------------- */
:root {
    --brand-purple: #3B084D;
    --brand-purple-hover: #2D063B;
    --brand-purple-light: #7B3A9B;
    --brand-purple-subtle: #F3EAF7;

    --brand-gold: #F4900C;
    --brand-gold-hover: #D97A00;
    --brand-gold-light: #FCE5C1;

    --heading-navy: #1A1A2E;
    --label-dark: #2D2D2D;
    --body-slate: #4A4A4A;
    --text-muted: #6B6B6B;

    --white: #ffffff;
    --bg-main: #F5F5F7;
    --bg-card: #FFFFFF;
    --bg-hover: #F8F8FA;

    --success-green: #15803D;
    --warning-orange: #D97706;
    --danger-red: #DC2626;
    --info-blue: #2563EB;

    --ruby: #DC2626;
    --magenta: #F4900C;
    --magenta-light: #FCE5C1;
    --lemon: #D97706;

    --border-default: #D1D5DB;
    --border-purple: #7B3A9B;
    --border-soft-purple: #E9DCF0;
    --border-magenta: #FCE5C1;
    --border-dashed: #3B084D;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-ambient: rgba(23, 23, 23, 0.06);
    --shadow-soft: rgba(23, 23, 23, 0.04);

    --radius-micro: 1px;
    --radius-standard: 4px;
    --radius-comfortable: 5px;
    --radius-relaxed: 6px;
    --radius-large: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;

    --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;

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
}