/* ========================================
   DESIGN TOKENS FOR CRYPTORINO
   ======================================== */
:root {

    /* Primary Brand/Accent */
    --color-brand-000: #63C9F8;
    --color-brand-100: #32B8F5;
    --color-brand-200: #0BA5EC;
    --color-brand-300: #0981B9;
    --color-brand-400: #065F88;

    /* Brand (Alias of Accent) */
    --color-semantic-brand-000: var(--color-brand-000);
    --color-semantic-brand-100: var(--color-brand-100);
    --color-semantic-brand-200: var(--color-brand-200);
    --color-semantic-brand-300: var(--color-brand-300);
    --color-semantic-brand-400: var(--color-brand-400);

    /* Accent Primary (alias of brand for designer compatibility) */
    --color-primitive-accent-primary-000: var(--color-brand-000);
    --color-primitive-accent-primary-100: var(--color-brand-100);
    --color-primitive-accent-primary-200: var(--color-brand-200);
    --color-primitive-accent-primary-300: var(--color-brand-300);
    --color-primitive-accent-primary-400: var(--color-brand-400);

    /* Inputs Fill */
    --color-components-inputs-fill-default: #FFFFFF;
    --color-components-inputs-fill-active: #FFFFFF;

    /* Raffle (Semantic.Brand.200) */
    --color-components-raffle-primary: var(--color-brand-200);

    /* Surface */
    --color-primitive-surface-000: #FFFFFF;
    --color-primitive-surface-100: #F3F6F6;
    --color-primitive-surface-200: #EEF2F2;
    --color-primitive-surface-300: #E2E8E9;
    --color-primitive-surface-400: #CEDADA;
    --color-primitive-surface-500: #B1C3C3;
    --color-primitive-surface-600: #94ADAD;

    /* Green (Status Success) — JSON Status.Success uses Green.000/200/600/700/800 */
    --color-primitive-green-000: #E9FCE9;
    --color-primitive-green-100: #A8F0AE;
    --color-primitive-green-200: #23A43F;
    --color-primitive-green-300: #1A7A2F;
    --color-primitive-green-400: #346A46;

    /* Yellow (Status Warning) */
    --color-primitive-yellow-000: #FFFBE5;
    --color-primitive-yellow-100: #FFE599;
    --color-primitive-yellow-200: #F7CC55;
    --color-primitive-yellow-300: #C78800;
    --color-primitive-yellow-400: #93691F;

    /* Red (Status Danger) */
    --color-primitive-red-000: #FFEBEF;
    --color-primitive-red-100: #FFC2CF;
    --color-primitive-red-200: #FF5C7F;
    --color-primitive-red-300: #C2024C;
    --color-primitive-red-400: #780833;

    /* Neutral */
    --color-primitive-neutral-000: #DBE5F0;
    --color-primitive-neutral-100: #BFCED9;
    --color-primitive-neutral-200: #8DB2C8;
    --color-primitive-neutral-300: #467091;
    --color-primitive-neutral-400: #324B67;

    /* Text */
    --color-components-text-normal: #102D40;
    --color-components-text-weaker: #2A546F;
    --color-components-text-weakest: #476C85;
    --color-components-text-disabled: #73828C;

    /* Icons (aliases of text) */
    --color-components-icons-normal: var(--color-components-text-normal);
    --color-components-icons-weaker: var(--color-components-text-weaker);
    --color-components-icons-weakest: var(--color-components-text-weakest);
    --color-components-icons-disabled: var(--color-components-text-disabled);

    /* ========================================
     * TYPOGRAPHY (fonts loaded by parent app)
     * ======================================== */

    --typography-heading-font: "Overpass", sans-serif;
    --typography-heading-weight: 600; /* SemiBold */
    --typography-heading-spacing: 0px;

    --typography-paragraph-font: "Overpass", sans-serif;
    --typography-paragraph-weight: 400; /* Regular */
    --typography-paragraph-spacing: 0px;

    --typography-title-font: var(--typography-heading-font);
    --typography-title-weight: 600; /* SemiBold */
    --typography-title-spacing: 0px;

    /* ========================================
     * SEMANTIC COLORS
     * ======================================== */

    /* Layer */
    --color-semantic-layer-000: var(--color-primitive-surface-000);
    --color-semantic-layer-100: var(--color-primitive-surface-100);
    --color-semantic-layer-200: var(--color-primitive-surface-200);
    --color-semantic-layer-300: var(--color-primitive-surface-300);

    /* Stroke */
    --color-semantic-stroke-000: var(--color-primitive-surface-400);
    --color-semantic-stroke-100: var(--color-primitive-surface-500);
    --color-semantic-stroke-200: var(--color-primitive-surface-600);

    /* Status - Neutral */
    --color-semantic-status-neutral-darkest: var(--color-primitive-neutral-000);
    --color-semantic-status-neutral-darker: var(--color-primitive-neutral-100);
    --color-semantic-status-neutral-normal: var(--color-primitive-neutral-200);
    --color-semantic-status-neutral-lighter: var(--color-primitive-neutral-300);
    --color-semantic-status-neutral-lightest: var(--color-primitive-neutral-400);

    /* Status - Success */
    --color-semantic-status-success-darkest: var(--color-primitive-green-000);
    --color-semantic-status-success-darker: var(--color-primitive-green-100);
    --color-semantic-status-success-normal: var(--color-primitive-green-200);
    --color-semantic-status-success-lighter: var(--color-primitive-green-300);
    --color-semantic-status-success-lightest: var(--color-primitive-green-400);

    /* Status - Warning */
    --color-semantic-status-warning-darkest: var(--color-primitive-yellow-000);
    --color-semantic-status-warning-darker: var(--color-primitive-yellow-100);
    --color-semantic-status-warning-normal: var(--color-primitive-yellow-200);
    --color-semantic-status-warning-lighter: var(--color-primitive-yellow-300);
    --color-semantic-status-warning-lightest: var(--color-primitive-yellow-400);

    /* Status - Danger */
    --color-semantic-status-danger-darkest: var(--color-primitive-red-000);
    --color-semantic-status-danger-darker: var(--color-primitive-red-100);
    --color-semantic-status-danger-normal: var(--color-primitive-red-200);
    --color-semantic-status-danger-lighter: var(--color-primitive-red-300);
    --color-semantic-status-danger-lightest: var(--color-primitive-red-400);

    /* Fill - Lighter (per cryptorino JSON Semantic.Fill.Lighter — base #36B2C8) */
    --color-semantic-fill-lighter-000: rgba(54, 178, 200, 0.08);
    --color-semantic-fill-lighter-100: rgba(54, 178, 200, 0.12);
    --color-semantic-fill-lighter-200: rgba(54, 178, 200, 0.16);

    /* Fill - Darker (per cryptorino JSON Semantic.Fill.Darker — base #6DA7B1) */
    --color-semantic-fill-darker-000: rgba(109, 167, 177, 0.10);
    --color-semantic-fill-darker-100: rgba(109, 167, 177, 0.15);
    --color-semantic-fill-darker-200: rgba(109, 167, 177, 0.20);

    /* Fill - Interact (per cryptorino JSON Semantic.Fill.Interact — base #36B2C8) */
    --color-semantic-fill-interact-000: var(--color-semantic-fill-lighter-000);
    --color-semantic-fill-interact-100: var(--color-semantic-fill-lighter-100);
    --color-semantic-fill-interact-200: var(--color-semantic-fill-lighter-200);

    --nova-max-width: 1140px;
    --nova-container-padding: 16px;
    --nova-container-padding-mobile: 15px;
    --nova-container-padding-top: 24px;

    --color-brand-cta-200: linear-gradient(180deg, #0BA5EC 0%, #0981B9 80%);
    --color-brand-cta-hover: #0981B9; /* Button.Primary.Hover = brand-300 */
    --color-brand-cta-hover-shadow: 0 0 12px rgba(11, 165, 236, 0.45);
    --color-brand-cta-secondary-hover: var(--color-semantic-fill-interact-000); /* Button.Tertiary.Hover */
    --color-brand-cta-secondary-background: transparent; /* Button.Tertiary.Default */

    --color-cta-text-normal: #FFFFFF;
    --config-corners-full: 8px;
    --config-corners-medium: 4px;

    /* NOVA TICKET PROGRESS (HEADER WIDGET) */
    --nova-ticket-progress-height: 40px;
    --nova-ticket-progress-background: rgba(0, 0, 0, 0.03);
    --nova-ticket-progress-border-radius: var(--config-corners-full);
    --nova-ticket-progress-border: none;

    /* NOVA LEADERBOARD PROMO GRADIENT */
    --nova-leaderboard-promo-gradient: radial-gradient(117.15% 141.42% at 0% -0.07%, rgba(11, 165, 236, 0.40) 0%, rgba(11, 165, 236, 0.00) 64.56%);
    --nova-leaderboard-gradient-color: #0BA5EC;

    /* Prize Pool Box Styling */
    --nova-prize-pool-border-radius: 8px;
    --nova-prize-pool-border: 1px solid var(--color-semantic-stroke-100, #B1C3C3);
    --nova-prize-pool-border-color: var(--color-semantic-stroke-100, #B1C3C3);
    --nova-prize-pool-background: var(--color-semantic-layer-200, #EEF2F2);

    --nova-leaderboard-header-color: var(--color-components-text-normal, #102D40);
    --nova-countdown-label-color: var(--color-components-text-normal, #102D40);

    --nova-bets-stream-header-color: var(--color-components-text-normal, #102D40);
    --nova-bets-stream-table-background: transparent;

    /* CUSTOM ICONS — default bundle until Cryptorino assets exist */
    --nova-icon-prize-path: /assets/themes/default/icons/prizeicon.png;
    --nova-icon-raffle-ticket-path: /assets/themes/default/icons/raffleticketicon.svg;
    --nova-icon-user-ticket-path: /assets/themes/default/icons/ticketicon.svg;
    --nova-icon-step-check-path: /assets/themes/default/icons/stepcheckicon.svg;
}