/* Open Design System – Design Tokens */

:root {
  /* =================================================== */
  /* TYPOGRAPHY TOKENS */
  /* =================================================== */

  /* Font Families */
  --font-family-heading: "Azeret Mono", "SF Mono", Monaco, Inconsolata, "Roboto Mono", Consolas, "Courier New", monospace;
  --font-family-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Font Weights */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* =================================================== */
  /* DESIGN TEXT STYLES (6 canonical styles)             */
  /* Sizes come from --font-size-h* responsive vars      */
  /* =================================================== */

  /* h1 - title: Azeret Mono semibold */
  --font-h1-family: var(--font-family-heading);
  --font-h1-weight: var(--font-weight-semibold);

  /* h2 - sub-title: Azeret Mono semibold */
  --font-h2-family: var(--font-family-heading);
  --font-h2-weight: var(--font-weight-semibold);

  /* h3 - bold body: DM Sans bold */
  --font-h3-family: var(--font-family-body);
  --font-h3-weight: var(--font-weight-bold);

  /* h4 - body: DM Sans medium */
  --font-h4-family: var(--font-family-body);
  --font-h4-weight: var(--font-weight-medium);

  /* h5 - title captions: Azeret Mono semibold UPPERCASE */
  --font-h5-family: var(--font-family-heading);
  --font-h5-weight: var(--font-weight-medium);

  /* h6 - captions: DM Sans medium */
  --font-h6-family: var(--font-family-body);
  --font-h6-weight: var(--font-weight-medium);

  /* =================================================== */
  /* SHADOW TOKENS */
  /* =================================================== */

  /* Base Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-base: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.08);

  /* Semantic Shadows */
  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-modal: var(--shadow-xl);
  --shadow-dropdown: var(--shadow-lg);
  /* Figma media-frame elevation (Flamingo website carousels/panels, 4033:90570) */
  --shadow-media-frame: 0px 24px 48px 0px rgba(0, 0, 0, 0.24);
  --shadow-tooltip: var(--shadow-base);
  --shadow-focus: 0 0 0 3px rgba(255, 192, 8, 0.3);

  /* Accent Shadows */
  --shadow-accent: 0 0 20px rgba(255, 192, 8, 0.2);
  --shadow-accent-lg: 0 0 40px rgba(255, 192, 8, 0.3);

  /* =================================================== */
  /* ANIMATION TOKENS */
  /* =================================================== */

  /* Duration */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 750ms;

  /* Easing Functions */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* =================================================== */
  /* Z-INDEX TOKENS */
  /* =================================================== */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-notification: 800;
  --z-debug: 9999;
}