/**
 * Design Tokens
 * Default theme: DARK
 */

 :root {
  /* =========================
     Typography
  ========================= */
  --font-family-primary: 'Fira Code', monospace;
  --font-family-mono: 'Fira Code', monospace;

  --font-size-xs: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --line-height-xs: 16px;
  --line-height-base: 18px;
  --line-height-md: 20px;
  --line-height-lg: 24px;
  --line-height-xl: 32px;

  /* =========================
     Colors – Brand (shared)
  ========================= */
  --color-brand: hsl(340, 75%, 55%);

  /* =========================
     Colors – Background
  ========================= */
  --color-bg-primary: hsl(0, 0%, 5%);

  /* =========================
     Colors – Button
  ========================= */
  --color-button-bg-default: hsl(0, 0%, 10%);
  --color-button-bg-muted: hsl(0, 0%, 7%);
  --color-button-bg-hover: hsl(0, 0%, 13%);
  --color-button-bg-selected: hsl(0, 0%, 15%);
  --color-button-bg-cta: var(--color-brand);

  /* =========================
     Colors – Outline
  ========================= */
  --color-button-outline-default: hsl(0, 0%, 10%);
  --color-button-outline-selected: hsl(0, 0%, 15%);

  /* =========================
     Colors – Text
  ========================= */
  --color-text-primary: hsl(0, 0%, 95%);
  --color-text-secondary: hsl(0, 0%, 65%);
  --color-text-muted: hsl(0, 0%, 45%);
  --color-text-brand: var(--color-brand);

  /* =========================
     Colors – Status
  ========================= */
  --color-status-success: #22c55e;
  --color-status-error: #ef4444;

  /* =========================
     Border & Radius
  ========================= */
  --border-width-outline: 1.5px;
  --border-width-sm: 1px;
  --border-width-md: 2px;

  --border-radius-xs: 2px;
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 10px;
  --border-radius-xl: 12px;
  --border-radius-2xl: 14px;
  --border-radius-3xl: 16px;
  --border-radius-4xl: 18px;
  --border-radius-default: 24px;
  --border-radius-full: 999px;

  /* =========================
     Spacing – Buttons
  ========================= */
  --spacing-button-medium-y: 16px;
  --spacing-button-medium-x: 20px;
  --spacing-button-small-y: 12px;
  --spacing-button-small-x: 16px;

  /* =========================
     Spacing – Groups
  ========================= */
  --spacing-group-large: 12px;
  --spacing-group-small: 8px;
  --spacing-group-tiny: 8px;

  /* =========================
     Spacing – Elements
  ========================= */
  --spacing-element-default: 24px;
  --spacing-element-group-title: 16px;

  /* =========================
     Spacing – Screen
  ========================= */
  --spacing-screen-horizontal: 24px;
  --spacing-screen-vertical: 16px;

  /* =========================
     Spacing – Generic
  ========================= */
  --spacing-icon-text: 8px;
  --spacing-text-gap: 8px;

  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 20px;

  /* =========================
     Icon Sizes
  ========================= */
  --icon-size-sm: 12px;
  --icon-size-md: 16px;
  --icon-size-base: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 28px;
  --icon-size-2xl: 32px;
  --icon-size-3xl: 40px;
  --icon-size-4xl: 48px;
  --icon-size-5xl: 56px;
  --icon-size-hero: 84px;

  --icon-stroke-width-medium: 1.5px;
  --icon-stroke-width-semibold: 2px;

  /* =========================
     Icon-only Buttons
  ========================= */
  --icon-only-medium-size: 20px;
  --icon-only-medium-padding: 16px;
  --icon-only-small-size: 18px;
  --icon-only-small-padding: 12px;

  /* =========================
     Layout
  ========================= */
  --container-max-width: 480px;

  --max-height-sm: 200px;
  --max-height-md: 360px;

  /* =========================
     Buttons
  ========================= */
  --button-height-sm: 28px;
  --button-height-md: 56px;

  /* =========================
     Padding
  ========================= */
  --padding-xs: 8px;
  --padding-sm: 6px;
  --padding-md: 8px;
  --padding-lg: 10px;
  --padding-xl: 12px;
  --padding-2xl: 16px;
  --padding-3xl: 24px;

  /* =========================
     Header & Modal
  ========================= */
  --header-padding-y: 16px;
  --header-padding-x: 16px;

  --modal-padding: 24px;
  --modal-border-radius: 24px;

  /* =========================
     Content
  ========================= */
  --content-padding-bottom: 100px;
}