/*
   Avlory design tokens. Load this before style.css (and before any page stylesheet).
   Name tokens by role, not by value. New tokens go here.
*/
:root {
    color-scheme: dark;

    /* Brand */
    --p-base: #C700FF;          /* electric violet, primary accent */
    --b-base: #2A65E5;          /* blue, secondary accent */
    --mix: #4942CF;
    --plum: #8E4585;
    --white: #FFFFFF;
    --light: #EBEBEB;
    --black: #000000;
    --dark: #121212;

    /* Product accents (each product's own mark colour; used where a page shows that product) */
    --brand-waverate: #B46CFF;      /* Waverate violet, lightened for text on black */
    --brand-pennysphere: #E07A2E;   /* PennySphere copper (logo) */
    --brand-pennysphere-text: #F2A36A; /* copper lightened for text on dark surfaces */
    --rating-low: #FF5252;          /* Waverate rating colour scale (app V3Design.getRatingColor) */
    --rating-mid: #448AFF;
    --rating-high: #B46CFF;

    /* Turntable materials (Waverate's walnut and brass) */
    --surface-walnut: #2B1D14;
    --surface-walnut-deep: #1A110B;
    --metal-brass: #C9A25A;
    --paper-cream: #F5F1E6;

    /* Glass */
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(40px);

    /* Legacy shorthand (duration + easing); prefer --dur-* with --ease-out in new code */
    --transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

    /* Surfaces & borders */
    --surface-1: rgba(255, 255, 255, 0.03);
    --surface-2: rgba(255, 255, 255, 0.06);
    --surface-field: #17171c;   /* opaque field/select background (native popups need a solid colour) */
    --border-subtle: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);

    /* Text */
    --text: rgba(255, 255, 255, 0.92);
    --text-muted: rgba(255, 255, 255, 0.64);   /* ~7.5:1 on #121212 */
    --accent-text: #E39BFF;     /* brand violet lightened for text on black (~10:1) */
    --accent-text-2: #9DB8FF;   /* brand blue lightened for text on black (~10:1) */
    --accent-fill: #A100D0;     /* brand violet deepened as a fill behind white text (6.1:1; --p-base is 4.3:1) */

    /* Status */
    --ok: #3ccf91;
    --warn: #f2b84b;
    --danger: #ff5d73;
    --danger-text: #ff9aa8;     /* readable danger text on dark surfaces */

    /* Shape */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 8px 28px rgba(199, 0, 255, 0.32);

    /* Spacing (4px scale) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Motion */
    --dur-fast: 150ms;
    --dur-med: 300ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Focus: use as `outline: var(--focus-ring); outline-offset: 3px;` */
    --focus-ring: 2px solid #e6a8ff;

    /* Type */
    --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}