/* ═══════════════════════════════════════════════════════════
   Design Tokens — Friends & Family Billing
   v1 · Lightweight foundation to prevent UI drift.
   All visual primitives live here; styles.css consumes them.
   ═══════════════════════════════════════════════════════════ */

:root {

    /* ── Spacing (8‑pt scale) ─────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;

    /* ── Brand ───────────────────────────────────────────── */
    --brand-primary-top:    #6E78D6;
    --brand-primary-bottom: #7B5FAF;
    --color-ink:            #1F2430;
    --color-body:           #5B6475;

    /* ── Semantic Colors ──────────────────────────────────── */
    --color-primary:       #6E78D6;
    --color-primary-hover: #5F6BC2;
    --color-primary-light: rgba(110, 120, 214, 0.10);
    --color-primary-bg:    rgba(110, 120, 214, 0.06);

    --color-secondary:       #718096;
    --color-secondary-hover: #4a5568;

    --color-success:       #3FA37C;
    --color-success-hover: #358D6B;
    --color-success-light: rgba(63, 163, 124, 0.10);
    --color-success-bg:    #c6f6d5;
    --color-success-fg:    #22543d;

    --color-warning:       #D6A24A;
    --color-warning-bg:    #fefcbf;
    --color-warning-fg:    #975a16;
    --color-warning-border:#facc15;
    --color-warning-surface:#fefce8;

    --color-danger:        #C65A5A;
    --color-danger-hover:  #B34E4E;
    --color-danger-light:  rgba(198, 90, 90, 0.10);
    --color-danger-bg:     #fed7d7;
    --color-danger-fg:     #9b2c2c;

    --color-info:          #5F86C9;

    --color-surface:       #ffffff;
    --color-surface-alt:   #F7F8FB;
    --color-surface-dim:   #f9fafb;
    --color-surface-inset: #E6E8EE;

    --color-border:        #e0e0e0;
    --color-border-light:  #f0f0f0;
    --color-border-subtle: #e2e8f0;
    --color-border-strong: #cbd5e0;

    --color-text:          #1F2430;
    --color-text-secondary:#5B6475;
    --color-text-muted:    #666666;
    --color-text-faint:    #999999;
    --color-text-placeholder:#a0aec0;
    --color-text-inverse:  #ffffff;

    --color-gradient-start: #6E78D6;
    --color-gradient-end:   #7B5FAF;

    /* ── Dispute / status-specific ────────────────────────── */
    --color-open-bg:       #fefcbf;
    --color-open-fg:       #975a16;
    --color-open-border:   #ecc94b;
    --color-review-bg:     #ebf4ff;
    --color-review-fg:     #3c5a99;
    --color-resolved-bg:   #f0fff4;
    --color-resolved-fg:   #276749;
    --color-rejected-bg:   #fff5f5;
    --color-rejected-fg:   #c53030;

    --color-ur-requested-bg:  #fef3c7;
    --color-ur-requested-fg:  #92400e;
    --color-ur-approved-bg:   #d1fae5;
    --color-ur-approved-fg:   #065f46;
    --color-ur-rejected-bg:   #fee2e2;
    --color-ur-rejected-fg:   #991b1b;

    /* ── Typography ───────────────────────────────────────── */
    --font-family:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    --text-heading-xl:    2.5rem;
    --text-heading-lg:    1.5rem;
    --text-heading-md:    1.2rem;
    --text-body:          1rem;
    --text-body-sm:       0.9rem;
    --text-body-xs:       0.85rem;
    --text-caption:       0.8rem;
    --text-label:         0.875rem;
    --text-numeric:       1.1rem;
    --text-badge:         0.75rem;
    --text-badge-sm:      0.7rem;

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

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

    /* ── Borders & Radii ──────────────────────────────────── */
    --radius-sm:  4px;
    --radius-md:  6px;
    --radius-lg:  8px;
    --radius-xl:  10px;
    --radius-2xl: 12px;
    --radius-pill: 9999px;

    --border-width:  2px;
    --border-thin:   1px;

    /* ── Shadows ──────────────────────────────────────────── */
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.10);
    --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.25);
    --shadow-xl:   0 20px 60px rgba(0, 0, 0, 0.15);
    --shadow-dialog:0 20px 60px rgba(0, 0, 0, 0.30);
    --shadow-dropdown:0 4px 16px rgba(0, 0, 0, 0.12);

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

    /* ── Layout ────────────────────────────────────────────── */
    --container-max-width: 1200px;
    --breakpoint-mobile: 768px;

    /* ── Component: Avatar / Logo ─────────────────────────── */
    --avatar-size:    48px;
    --avatar-size-sm: 32px;
    --logo-width:     80px;
    --logo-height:    60px;

    /* ── Component: Toast ─────────────────────────────────── */
    --toast-bg: #1a1a2e;
    --toast-text: #ffffff;
    --toast-dismiss: #8b8fa3;

    /* ── Z-index scale ────────────────────────────────────── */
    --z-dropdown: 100;
    --z-dialog:   9999;
    --z-toast:    10000;
}