Design Tokens

/* hodl-tokens.css — drop into any HODL product */
:root {
  /* Brand */
  --hodl-primary: #003ECB;
  --hodl-primary-deep: #002D58;
  --hodl-violet: hsl(265 90% 65%);
  --hodl-magenta: hsl(280 80% 55%);
  --hodl-bg: #0D0827;
  --hodl-ink: #191919;

  /* Club */
  --club-gold: #C9A86B;
  --club-platinum: #D8DCE3;
  --club-ink: #0A0820;

  /* Surfaces (HSL) */
  --background: 250 35% 6%;
  --foreground: 0 0% 98%;
  --card: 255 30% 9%;
  --secondary: 255 22% 14%;
  --muted: 255 18% 16%;
  --border: 255 18% 18%;
  --primary: 265 90% 65%;
  --accent: 280 80% 55%;

  /* State */
  --success: 150 65% 45%;
  --warning: 38 95% 55%;
  --destructive: 0 75% 60%;
  --info: 210 90% 60%;

  /* Radius */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.6);
  --shadow-glow-violet: 0 0 40px hsl(265 90% 65% / .35);
  --shadow-glow-gold:   0 0 40px hsl(40 55% 60% / .30);

  /* Gradients */
  --grad-signature: linear-gradient(135deg, hsl(265 90% 60%), hsl(280 80% 55%));
  --grad-button: linear-gradient(135deg, #003ECB, hsl(265 90% 65%));
  --grad-hero: radial-gradient(120% 80% at 50% 0%, hsl(265 90% 35% / .55), transparent 60%), #0D0827;
  --grad-club-gold: linear-gradient(135deg, #8a6a2c, #C9A86B 45%, #f3dfa8 65%, #C9A86B);

  /* Motion */
  --ease-standard:  cubic-bezier(.2,.8,.2,1);
  --ease-emphasized: cubic-bezier(.22,1,.36,1);
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-hero: 700ms;
}

/* Tailwind v4 — append to src/styles.css */
@theme {
  --font-display: "Bebas Neue", sans-serif;
  --font-sans: "Inter", sans-serif;
  --font-tech: "Orbitron", sans-serif;
  --font-editorial: "Cormorant Garamond", serif;

  --color-hodl-primary: #003ECB;
  --color-hodl-violet: hsl(265 90% 65%);
  --color-hodl-magenta: hsl(280 80% 55%);
  --color-hodl-bg: #0D0827;

  --color-club-gold: #C9A86B;
  --color-club-platinum: #D8DCE3;
}

{
  "color": {
    "brand": {
      "primary":      { "value": "#003ECB" },
      "primaryDeep":  { "value": "#002D58" },
      "violet":       { "value": "#9B59F2" },
      "magenta":      { "value": "#CC4DD9" },
      "background":   { "value": "#0D0827" }
    },
    "club": {
      "gold":      { "value": "#C9A86B" },
      "platinum":  { "value": "#D8DCE3" }
    },
    "state": {
      "success": { "value": "#26B373" },
      "warning": { "value": "#F5A623" },
      "error":   { "value": "#E04B4B" },
      "info":    { "value": "#3D8BF2" }
    }
  },
  "radius": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "pill": 9999 },
  "spacing": [2,4,6,8,12,16,20,24,32,40,48,64,80,96,128],
  "motion": {
    "duration": { "fast": 150, "base": 250, "slow": 400, "hero": 700 },
    "ease": {
      "standard":   [0.2, 0.8, 0.2, 1.0],
      "emphasized": [0.22, 1.0, 0.36, 1.0]
    }
  },
  "type": {
    "family": {
      "display":   "Bebas Neue",
      "sans":      "Inter",
      "tech":      "Orbitron",
      "editorial": "Cormorant Garamond"
    }
  }
}

// hodl_theme.dart — Flutter ThemeData starter
import 'package:flutter/material.dart';

class HodlColors {
  static const primary     = Color(0xFF003ECB);
  static const primaryDeep = Color(0xFF002D58);
  static const violet      = Color(0xFF9B59F2);
  static const magenta     = Color(0xFFCC4DD9);
  static const background  = Color(0xFF0D0827);
  static const ink         = Color(0xFF191919);
  static const clubGold    = Color(0xFFC9A86B);
  static const clubPlatinum= Color(0xFFD8DCE3);
}

final hodlTheme = ThemeData(
  brightness: Brightness.dark,
  scaffoldBackgroundColor: HodlColors.background,
  colorScheme: ColorScheme.dark(
    primary: HodlColors.violet,
    secondary: HodlColors.magenta,
    surface: const Color(0xFF16121F),
    onPrimary: Colors.white,
    error: const Color(0xFFE04B4B),
  ),
  textTheme: const TextTheme(
    displayLarge: TextStyle(fontFamily: 'BebasNeue', fontSize: 72, letterSpacing: 1.0),
    headlineLarge: TextStyle(fontFamily: 'Inter', fontWeight: FontWeight.w700, fontSize: 32),
    bodyLarge: TextStyle(fontFamily: 'Inter', fontSize: 16, height: 1.6),
    labelLarge: TextStyle(fontFamily: 'Inter', fontWeight: FontWeight.w600, fontSize: 14, letterSpacing: 0.5),
  ),
);

// tokens.ts — typed React tokens
export const hodl = {
  color: { primary: "#003ECB", violet: "#9B59F2", magenta: "#CC4DD9", bg: "#0D0827" },
  club:  { gold: "#C9A86B", platinum: "#D8DCE3" },
  radius: { xs:4, sm:8, md:12, lg:16, xl:24, "2xl":32, pill:9999 },
  motion: {
    duration: { fast:150, base:250, slow:400, hero:700 },
    ease: { standard:[0.2,0.8,0.2,1], emphasized:[0.22,1,0.36,1] },
  },
} as const;