/* Shared design tokens — the approved customer-facing design system
   (palette, text, gold accent, status colors, spacing, radius, button sizing, type scale).
   Pages opt in by linking this file and using the --ds-* variables. */
:root {
    /* Backgrounds: page -> card surface -> popup/menu surface */
    --ds-bg: #161616;
    --ds-surface: #1E1E1E;
    --ds-raised: #262626;
    --ds-border: rgba(255, 255, 255, .09);
    --ds-border-strong: rgba(255, 255, 255, .16);

    /* Text */
    --ds-text: #F2F2F2;
    --ds-muted: #A8A8A8;
    --ds-faint: #7A7A7A;

    /* Gold accent */
    --ds-gold: #F5A623;
    --ds-gold-hover: #FFB840;
    --ds-gold-text: #E8C986;
    --ds-gold-soft: rgba(245, 166, 35, .10);
    --ds-gold-line: rgba(245, 166, 35, .40);
    --ds-on-gold: #1A1A1A;

    /* Status */
    --ds-success: #8FD4AC;
    --ds-success-soft: rgba(143, 212, 172, .12);
    --ds-success-line: rgba(143, 212, 172, .28);
    --ds-danger: #E8A0A0;
    --ds-danger-soft: rgba(232, 160, 160, .12);
    --ds-danger-line: rgba(232, 160, 160, .28);

    /* Spacing scale */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 24px;
    --ds-space-6: 32px;
    --ds-space-7: 48px;
    --ds-space-8: 64px;

    /* Radius */
    --ds-radius-sm: 8px;
    --ds-radius-btn: 10px;
    --ds-radius-card: 12px;
    --ds-radius-pill: 999px;

    /* Buttons: regular and small */
    --ds-btn-height: 44px;
    --ds-btn-padding: 20px;
    --ds-btn-font: .9375rem;
    --ds-btn-height-sm: 36px;
    --ds-btn-padding-sm: 14px;
    --ds-btn-font-sm: .8125rem;

    /* Type scale (12px is the minimum for readable text) */
    --ds-fs-12: .75rem;
    --ds-fs-13: .8125rem;
    --ds-fs-14: .875rem;
    --ds-fs-15: .9375rem;
    --ds-fs-16: 1rem;
    --ds-fs-18: 1.125rem;
    --ds-fs-22: 1.375rem;
    --ds-fs-28: 1.75rem;
    --ds-fs-36: 2.25rem;
}