/**
 * tokens.css — AnyMotion Design Token System
 *
 * Single source of truth for all design values.
 * All other CSS files reference these variables only.
 *
 * Gold #B9A157 was pixel-sampled from the actual logo PNG via Canvas API:
 * https://www.anymotion.nl/wp-content/uploads/2018/05/cropped-logo_500.png
 * rgb(185, 161, 87) → #B9A157
 */

:root {
    /* ── Brand ── */
    --gold:          #B9A157;   /* Primary accent */
    --gold-light:    #CDB870;   /* Hover */
    --gold-dark:     #9A8347;   /* Active / pressed */
    --gold-subtle:   rgba(185, 161, 87, 0.08);   /* Subtle tint background */
    --gold-border:   rgba(185, 161, 87, 0.25);   /* Subtle gold border */

    --platinum:      #8A8A8A;   /* Secondary accent */
    --platinum-light: #AAAAAA;  /* Hover */

    /* ── Backgrounds (layered dark surfaces) ── */
    --bg:            #0A0A0A;   /* Page base */
    --bg-1:          #141414;   /* Sections, nav, footer */
    --bg-2:          #1A1A1A;   /* Cards, panels, inputs */
    --bg-3:          #222222;   /* Nested panels */

    /* ── Borders ── */
    --border:        #1F1F1F;
    --border-light:  #2A2A2A;

    /* ── Text ── */
    --text:          #F0EBE5;   /* Primary — warm white */
    --text-secondary: #C8C4BE;
    --muted:         #6A6460;   /* Body copy */
    --subtle:        #3A3A3A;   /* Placeholders, disabled */

    /* ── Spacing scale ── */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 128px;

    /* ── Container ── */
    --container-max:     1200px;
    --container-padding: 24px;

    /* ── Typography ── */
    --font-heading: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Motion ── */
    --transition:      200ms ease;
    --transition-slow: 400ms ease;

    /* ── Radius ── */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* ── Shadows ── */
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-gold: 0 4px 20px rgba(185, 161, 87, 0.2);
}