/*
 * Rocky Global design system: tokens.
 *
 * Single source for colour, type, radius, spacing and motion across the admin
 * area (admin, organizer, supervisor and club panels). Components and pages
 * reference these custom properties instead of raw values.
 */
:root {
    /* Brand */
    --rg-color-brand: #ff2a3c;
    --rg-color-brand-hover: #e91f31;
    --rg-color-brand-strong: #d61f30;
    --rg-color-brand-soft: #ffd6da;
    --rg-color-brand-tint: #ffe9eb;
    --rg-color-brand-ink: #e0182b;

    /* Brand ramp (light to strong), used for ranked data */
    --rg-color-brand-100: #ffe4e7;
    --rg-color-brand-200: #ffc7cd;
    --rg-color-brand-300: #ff9aa4;
    --rg-color-brand-400: #ff6070;
    --rg-color-brand-500: #ff2a3c;
    --rg-color-brand-ink-strong: #c21526;
    --rg-color-brand-ink-deep: #8f0d1b;

    /* Categorical series (charts that compare unrelated items, e.g. countries) */
    --rg-color-series-1: #ff2a3c;
    --rg-color-series-2: #ff5a1f;
    --rg-color-series-3: #ffbb00;
    --rg-color-series-4: #2b6cff;
    --rg-color-series-5: #ffa3ac;
    --rg-color-series-6: #9dbcff;
    --rg-color-series-other: #e8e8e5;

    /* Neutrals */
    --rg-color-ink: #0a0a0a;
    --rg-color-ink-soft: #333333;
    --rg-color-ink-muted: #555555;
    --rg-color-text-muted: #8a8a8a;
    --rg-color-text-faint: #a3a3a3;
    --rg-color-text-ghost: #b5b5b5;
    --rg-color-surface: #ffffff;
    --rg-color-surface-sunken: #f3f3f1;
    --rg-color-surface-hover: #f7f7f5;
    --rg-color-canvas: #f3f3f1;
    --rg-color-line: #f0f0ee;
    --rg-color-line-strong: #dcdcd9;
    --rg-color-dot-idle: #e8e8e6;
    --rg-color-hatch-a: #ececea;
    --rg-color-hatch-b: #f6f6f4;

    /* Inverse (dark) surfaces */
    --rg-color-inverse: #121212;
    --rg-color-inverse-hover: #1f1f1f;
    --rg-color-inverse-header: #1a1a1a;
    --rg-color-inverse-line: #2b2b2b;
    --rg-color-inverse-track: #2a2a2a;
    --rg-color-inverse-text: #ffffff;
    --rg-color-inverse-muted: #9a9a9a;

    /* Status */
    --rg-color-success: #15803d;
    --rg-color-success-tint: #e7f6ec;
    --rg-color-danger: #e0182b;
    --rg-color-danger-tint: #ffe9eb;
    --rg-color-warning: #b45309;
    --rg-color-warning-tint: #fef3e2;
    --rg-color-info: #0369a1;
    --rg-color-info-tint: #e6f3fb;

    /* Typography */
    --rg-font-family: 'Bale', 'Helvetica', 'Arial', sans-serif;
    --rg-font-weight-light: 300;
    --rg-font-weight-regular: 400;
    --rg-font-weight-medium: 500;
    --rg-font-size-2xs: 10px;
    --rg-font-size-xs: 11px;
    --rg-font-size-sm: 12px;
    --rg-font-size-md: 13px;
    --rg-font-size-base: 14px;
    --rg-font-size-lg: 15px;
    --rg-font-size-xl: 18px;
    --rg-font-size-2xl: 20px;
    --rg-font-size-3xl: 28px;
    --rg-font-size-4xl: 34px;
    --rg-font-size-5xl: 40px;
    --rg-font-size-6xl: 56px;
    --rg-font-size-7xl: 64px;
    --rg-letter-spacing-tight: -0.5px;
    --rg-letter-spacing-tighter: -1.2px;
    --rg-letter-spacing-display: -2px;

    /* Radius */
    --rg-radius-sm: 10px;
    --rg-radius-md: 14px;
    --rg-radius-lg: 16px;
    --rg-radius-xl: 24px;
    --rg-radius-pill: 999px;

    /* Spacing */
    --rg-space-1: 4px;
    --rg-space-2: 8px;
    --rg-space-3: 12px;
    --rg-space-4: 16px;
    --rg-space-5: 20px;
    --rg-space-6: 24px;
    --rg-space-7: 28px;
    --rg-space-8: 32px;
    --rg-space-9: 36px;
    --rg-space-10: 48px;

    /* Layout */
    --rg-grid-gap: 16px;
    --rg-card-padding: 24px;
    --rg-card-padding-wide: 24px 28px;
    --rg-control-height: 44px;
    --rg-control-height-sm: 32px;

    /* Motion */
    --rg-transition: 0.2s ease;
    --rg-enter-duration: 0.5s;
    --rg-enter-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --rg-enter-stagger: 70ms;
}