/**
 * Design Tokens extracted from: https://www.amazon.com
 * Generated on: 2026-04-30
 * 
 * Colors: 65 total across 19 hue groups
 * Semantic naming: --{hue}-{scale} format (e.g., blue-500, gray-800)
 * 
 * Usage in Nuxt/Next.js:
 * 1. Save this file as app/assets/css/main.css (Nuxt) or styles/globals.css (Next.js)
 * 2. Import in your nuxt.config.ts: css: ['~/assets/css/main.css']
 *    Or in Next.js _app.tsx: import '../styles/globals.css'
 * 3. Use the tokens with Tailwind classes like: bg-primary-500, text-brand-700, font-sans
 */

@import "tailwindcss";

@theme static {
  /* ============================================
     Font Families
     Usage: font-sans, font-serif, font-mono
     ============================================ */
  --font-sans: "Amazon Ember";
  --font-arial: Arial;
  --font-amazon-ember: 'Amazon Ember';
  --font-amazon-ember-regular: Amazon Ember Regular;
  --font-amazon-ember-modern-display: 'Amazon Ember Modern Display';

  /* ============================================
     Semantic Color Palette
     65 colors across 19 hue groups
     Usage: bg-[var(--blue-500)], text-[var(--gray-800)]
     Sorted by hue and lightness (50=lightest, 900=darkest)
     ============================================ */

  /* Gray (10 shades) */
  --gray-50: #0f1111; /* Used 211x */
  --gray-100: #333; /* Used 20x */
  --gray-200: #565959; /* Used 51x */
  --gray-300: #6f7373; /* Used 11x */
  --gray-400: #888c8c; /* Used 86x */
  --gray-500: #a2a6a6; /* Used 11x */
  --gray-600: #bbb; /* Used 7x */
  --gray-700: #d5d9d9; /* Used 73x */
  --gray-800: #ddd; /* Used 58x */
  --gray-900: #fff; /* Used 573x */

  /* Sky (4 shades) */
  --sky-50: #232f3e; /* Used 26x */
  --sky-300: #2162a1; /* Used 115x */
  --sky-600: #418FDE; /* Used 3x */
  --sky-900: #edf8ff; /* Used 33x */

  /* Red (2 shades) */
  --red-300: #c7511f; /* Used 47x */
  --red-700: #b12704; /* Used 4x */

  /* Blue (5 shades) */
  --blue-50: #002f78; /* Used 10x */
  --blue-200: #143075; /* Used 6x */
  --blue-500: #0064f9; /* Used 25x */
  --blue-700: #6868CB; /* Used 1x */
  --blue-900: #D6DCE7; /* Used 2x */

  /* Slate (3 shades) */
  --slate-50: #33373d; /* Used 5x */
  --slate-500: #848688; /* Used 1x */
  --slate-900: #a7acb2; /* Used 24x */

  /* Amber (3 shades) */
  --amber-50: #83714E; /* Used 6x */
  --amber-500: #ffce12; /* Used 20x */
  --amber-900: #f8e3ad; /* Used 5x */

  /* Orange (3 shades) */
  --orange-50: #4e1e00; /* Used 3x */
  --orange-500: #F90; /* Used 31x */
  --orange-900: #febd69; /* Used 5x */

  /* Rose (4 shades) */
  --rose-50: #c10015; /* Used 19x */
  --rose-300: #ff3319; /* Used 1x */
  --rose-600: #fe8774; /* Used 2x */
  --rose-900: #fee; /* Used 2x */

  /* Pink (3 shades) */
  --pink-50: #a9176f; /* Used 8x */
  --pink-500: #cc0c39; /* Used 30x */
  --pink-900: #f2a0d1; /* Used 6x */

  /* Emerald (3 shades) */
  --emerald-50: #085749; /* Used 6x */
  --emerald-500: #0b7b3c; /* Used 17x */
  --emerald-900: #d8f7eb; /* Used 2x */

  /* Teal (4 shades) */
  --teal-50: #049796; /* Used 3x */
  --teal-300: #27afba; /* Used 2x */
  --teal-600: #91f6fe; /* Used 6x */
  --teal-900: #f7fafa; /* Used 15x */

  /* Cyan (5 shades) */
  --cyan-50: #017185; /* Used 12x */
  --cyan-200: #35798a; /* Used 10x */
  --cyan-500: #1A9DCC; /* Used 1x */
  --cyan-700: #85DFFF; /* Used 1x */
  --cyan-900: #C8F3FA; /* Used 10x */

  /* Green (3 shades) */
  --green-50: #090; /* Used 3x */
  --green-500: #4d9c2d; /* Used 2x */
  --green-900: #d5f9d5; /* Used 5x */

  /* Violet (2 shades) */
  --violet-300: #6700ce; /* Used 5x */
  --violet-700: #5D3984; /* Used 1x */

  /* Zinc (3 shades) */
  --zinc-50: #6c6e73; /* Used 1x */
  --zinc-500: #8D9096; /* Used 3x */
  --zinc-900: #A8A9AD; /* Used 1x */

  /* Lime (3 shades) */
  --lime-50: #28560E; /* Used 1x */
  --lime-500: #77bc1f; /* Used 2x */
  --lime-900: #93D059; /* Used 1x */

  /* Yellow (2 shades) */
  --yellow-300: #C8DA2B; /* Used 1x */
  --yellow-700: #B4BD00; /* Used 1x */

  /* Fuchsia (2 shades) */
  --fuchsia-300: #8f218e; /* Used 1x */
  --fuchsia-700: #5C315E; /* Used 1x */

  /* Indigo (1 shades) */
  --indigo-500: #5c26c9; /* Used 1x */

  /* ============================================
     Typography Scale
     Usage: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl...
     ============================================ */
  --text-xs: 0;
  --text-sm: .625rem;
  --text-base: .6875rem;
  --text-lg: .75rem;
  --text-xl: .875rem;
  --text-2xl: .9em;
  --text-3xl: 1rem;
  --text-4xl: 1px;
  --text-5xl: 1.125rem;
  --text-6xl: 1.25rem;
  --text-7xl: 1.375rem;
  --text-8xl: 1.5rem;
  --text-9xl: 1.75rem;

  /* ============================================
     Line Heights
     Usage: leading-none, leading-tight, leading-normal, leading-relaxed, leading-loose
     ============================================ */
  --leading-none: 0;
  --leading-tight: 1rem;
  --leading-snug: 1;
  --leading-normal: 1em;
  --leading-relaxed: 1px;
  --leading-loose: 1.1rem;

  /* ============================================
     Border Radius
     Usage: rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-full
     ============================================ */
  --radius-sm: 0;
  --radius-DEFAULT: 0\9;
  --radius-md: 0 0 3px 3px;
  --radius-lg: 0 4px 4px 0;
  --radius-xl: 0 3px 3px 0;
  --radius-2xl: 0 7px 7px 0;
  --radius-3xl: 0 0 7px 7px;

  /* ============================================
     Box Shadows
     Usage: shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl
     ============================================ */
  --shadow-sm: inset 0 0 0 3px #2162a1,inset 0 0 0 6px #fff;
  --shadow-DEFAULT: 0 2px 6px 0 #000;
  --shadow-md: 0 0 0 2px #F90,0 0 0 3px rgba(255,153,0,.5);
  --shadow-lg: 0 1px 0 0 rgba(255,255,255,.5);
  --shadow-xl: 0 2px 5px 0 rgba(213,217,217,.5);
  --shadow-2xl: 0 2px 4px 0 rgba(0,0,0,.13);

  /* ============================================
     Z-Index Scale
     Usage: z-0, z-10, z-20, z-30, z-40, z-50
     ============================================ */
  --z--1: -1;
  --z-0: 0;
  --z-1: 1;
  --z-2: 2;
  --z-3: 3;
  --z-4: 4;
  --z-5: 5;
  --z-6: 6;
  --z-9: 9;
  --z-10: 10;

}