/* =========================================================
   D2C GAME — CORE DESIGN TOKENS

   IMPORTANT:
   This file contains ONLY global brand variables,
   harmless resets and accessibility rules.

   It must NOT control section layouts, font sizes,
   card dimensions, buttons, header or hero geometry.
   ========================================================= */


/* ---------------------------------------------------------
   BRAND TOKENS
   --------------------------------------------------------- */

:root {

    /* Brand colours */
    --d2c-purple: #6d2cff;
    --d2c-purple-bright: #7b36ff;
    --d2c-purple-soft: #f2ebff;
    --d2c-purple-line: #d9c7ff;

    --d2c-gold: #ffc329;
    --d2c-gold-light: #ffd05a;
    --d2c-gold-hover: #ffd463;


    /* Dark colours */
    --d2c-black: #07090d;
    --d2c-black-2: #0b0f15;
    --d2c-navy: #09101d;


    /* Text */
    --d2c-ink: #0b0d11;
    --d2c-copy: #566174;
    --d2c-copy-dark: #c8cdd6;
    --d2c-muted: #7b8595;


    /* Surfaces */
    --d2c-white: #ffffff;
    --d2c-surface: #f7f8fa;
    --d2c-border: #e2e5ea;


    /* Fonts */
    --d2c-font:
        Inter,
        "Helvetica Neue",
        Arial,
        system-ui,
        -apple-system,
        sans-serif;


    /* Font weights */
    --d2c-weight-regular: 400;
    --d2c-weight-medium: 500;
    --d2c-weight-semibold: 600;
    --d2c-weight-bold: 700;
    --d2c-weight-extrabold: 800;
    --d2c-weight-black: 900;


    /* Radius */
    --d2c-radius-sm: 7px;
    --d2c-radius: 10px;
    --d2c-radius-lg: 14px;
    --d2c-radius-round: 999px;


    /* Shadows */
    --d2c-shadow-card:
        0 6px 22px rgba(18, 27, 43, .08);

    --d2c-shadow-card-hover:
        0 12px 34px rgba(18, 27, 43, .13);

    --d2c-shadow-dark:
        0 18px 44px rgba(0, 0, 0, .34);

    --d2c-shadow-gold:
        0 7px 20px rgba(255, 184, 20, .20);
}


/* ---------------------------------------------------------
   SAFE GLOBAL FONT
   --------------------------------------------------------- */

body.home-page,
body.home-page button,
body.home-page input,
body.home-page textarea,
body.home-page select {
    font-family: var(--d2c-font);
}


/* ---------------------------------------------------------
   SAFE BOX SIZING
   --------------------------------------------------------- */

body.home-page *,
body.home-page *::before,
body.home-page *::after {
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   FONT RENDERING
   --------------------------------------------------------- */

body.home-page {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

body.home-page a,
body.home-page button {
    -webkit-tap-highlight-color: transparent;
}


body.home-page a:focus-visible,
body.home-page button:focus-visible,
body.home-page input:focus-visible,
body.home-page textarea:focus-visible,
body.home-page select:focus-visible,
body.home-page summary:focus-visible {

    outline:
        3px solid
        rgba(109, 44, 255, .30);

    outline-offset: 3px;
}


/* ---------------------------------------------------------
   OPTIONAL COLOUR UTILITIES

   These only change colour.
   They do NOT change size or layout.
   --------------------------------------------------------- */

.purple-text {
    color: var(--d2c-purple);
}

.gold-text {
    color: var(--d2c-gold);
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    body.home-page *,
    body.home-page *::before,
    body.home-page *::after {

        scroll-behavior: auto !important;

        transition-duration: .001ms !important;

        animation-duration: .001ms !important;

        animation-iteration-count: 1 !important;
    }
}