/* ============================================================
   THEME.CSS - Design System Luvreizel
   Palette: Or / Marine — dark casino, chaud, professionnel
   ============================================================ */

:root {
    /* Brand / Primary (Or Casino) -------------------------*/
    --c-primary:          #FFB800;
    --c-primary-light:    #FFD000;
    --c-primary-dark:     #CC9200;
    --c-primary-bg:       rgba(255, 184, 0, 0.10);
    --c-primary-border:   rgba(255, 184, 0, 0.35);
    --c-primary-tint:     rgba(255, 184, 0, 0.15);
    --c-primary-tint2:    rgba(255, 184, 0, 0.12);
    --c-primary-glow:     rgba(255, 184, 0, 0.40);
    --c-accent:           var(--c-primary);

    /* Neutrals (Marine / Bleu nuit) -----------------------*/
    --c-bg:               #0B1829;
    --c-bg-2:             #0D1B2E;
    --c-surface:          #0F2035;
    --c-surface2:         #152840;
    --c-surface3:         #1A3350;
    --c-surface-hover:    #173048;

    --c-border:           rgba(255, 255, 255, 0.07);
    --c-border-strong:    rgba(255, 255, 255, 0.13);
    --c-border-accent:    rgba(255, 184, 0, 0.40);

    /* Text ------------------------------------------------*/
    --c-text:             #f4f4f5;
    --c-text-2:           #c6c6ce;
    --c-text-muted:       #8a8a94;
    --c-text-faint:       #5e5e67;

    /* Semantic --------------------------------------------*/
    --c-success:          #22c55e;
    --c-success-bg:       rgba(34, 197, 94, 0.12);
    --c-success-border:   rgba(34, 197, 94, 0.3);

    --c-danger:           #ef4444;
    --c-danger-bg:        rgba(239, 68, 68, 0.12);
    --c-danger-border:    rgba(239, 68, 68, 0.35);

    --c-warning:          #f59e0b;
    --c-warning-bg:       rgba(245, 158, 11, 0.12);
    --c-warning-border:   rgba(245, 158, 11, 0.3);

    --c-info:             #3b82f6;
    --c-info-bg:          rgba(59, 130, 246, 0.12);

    /* Radius ----------------------------------------------*/
    --radius-xs:          4px;
    --radius-sm:          6px;
    --radius-md:          10px;
    --radius-lg:          14px;
    --radius-xl:          20px;
    --radius-pill:        999px;

    /* Shadow ----------------------------------------------*/
    --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg:          0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-primary:     0 6px 24px var(--c-primary-glow);

    /* Motion ----------------------------------------------*/
    --transition:         all 0.2s ease;
    --transition-slow:    all 0.35s ease;

    /* Layout ----------------------------------------------*/
    --navbar-h:           70px;
    --container-max:      1400px;
}

/* Reset ---------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--c-bg);
    color: var(--c-text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    padding-top: var(--navbar-h);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 184, 0, 0.07), transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%,  rgba(0, 180, 255, 0.04), transparent 70%);
    background-attachment: fixed;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--c-primary-light);
}

button {
    font-family: inherit;
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
}

input, select, textarea {
    font-family: inherit;
}

/* Accent utility */
.text-accent {
    color: var(--c-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--c-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--c-surface3);
    border-radius: 10px;
    border: 2px solid var(--c-bg);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--c-primary-dark);
}

/* Selection */
::selection {
    background: var(--c-primary);
    color: #fff;
}