@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Barlow:wght@400;500;600&display=swap');

:root {
    --atrix-font: 'Barlow', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --atrix-font-display: 'Oswald', 'Arial Narrow', 'Segoe UI', sans-serif;

    --atrix-bg: rgba(12, 9, 16, 0.95);
    --atrix-bg-deep: #0d0a14;
    --atrix-bg-deep-rgb: 13, 10, 20;
    --atrix-surface: rgba(255, 255, 255, 0.05);
    --atrix-surface-solid: #16101c;
    --atrix-border: rgba(255, 255, 255, 0.10);
    --atrix-border-strong: rgba(255, 255, 255, 0.16);
    --atrix-scrim: rgba(4, 3, 8, 0.35);

    --atrix-text: #ffffff;
    --atrix-text-soft: #d8d2c8;
    --atrix-text-muted: #a89681;
    --atrix-text-dim: #7d7466;

    --atrix-accent: #e8b45a;
    --atrix-accent-rgb: 232, 180, 90;
    --atrix-accent-grad: linear-gradient(120deg, #f0c46e, #dfa040);
    --atrix-accent-ink: #241708;
    --atrix-success: #4ec98a;
    --atrix-success-rgb: 78, 201, 138;
    --atrix-danger: #e0455a;
    --atrix-danger-rgb: 224, 69, 90;
    --atrix-warning: #f2803c;
    --atrix-warning-rgb: 242, 128, 60;

    --atrix-radius-sm: 3px;
    --atrix-radius: 6px;
    --atrix-radius-lg: 10px;

    --atrix-kicker-spacing: 3px;
    --atrix-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --atrix-glow-accent: 0 10px 34px rgba(232, 180, 90, 0.35);
}