/* Design Tokens — spacing, typography, radius, z-index, shadows */

:root {
  /* ── Spacing (4px base) ── */
  --app-space-1:   0.25rem;   /*  4px */
  --app-space-2:   0.5rem;    /*  8px */
  --app-space-3:   0.75rem;   /* 12px */
  --app-space-4:   1rem;      /* 16px */
  --app-space-6:   1.5rem;    /* 24px */
  --app-space-8:   2rem;      /* 32px */
  --app-space-12:  3rem;      /* 48px */
  --app-space-16:  4rem;      /* 64px */

  /* ── Typography ── */
  --app-font-sans:     'Plus Jakarta Sans', 'IBM Plex Sans', system-ui, sans-serif;
  --app-font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  --app-text-xs:       0.75rem;    /* 12px */
  --app-text-sm:       0.875rem;   /* 14px */
  --app-text-base:     1rem;       /* 16px */
  --app-text-lg:       1.125rem;   /* 18px */
  --app-text-xl:       1.25rem;    /* 20px */
  --app-text-2xl:      1.5rem;     /* 24px */

  --app-font-normal:   400;
  --app-font-medium:   500;
  --app-font-semibold: 600;
  --app-font-bold:     700;

  --app-leading-tight:  1.25;
  --app-leading-normal: 1.5;

  /* ── Border Radius ── */
  --app-radius-sm:     0.25rem;    /*  4px */
  --app-radius-md:     0.375rem;   /*  6px — default */
  --app-radius-lg:     0.5rem;     /*  8px */
  --app-radius-xl:     0.75rem;    /* 12px */
  --app-radius-full:   9999px;     /* pill shape */

  /* ── Shadows ── */
  --app-shadow-sm:     0 1px 2px hsl(var(--app-background) / 0.05);
  --app-shadow-md:     0 4px 6px hsl(var(--app-background) / 0.1);
  --app-shadow-lg:     0 10px 15px hsl(var(--app-background) / 0.15);

  /* ── Z-Index Scale ── */
  --app-z-dropdown:    50;
  --app-z-sticky:      100;
  --app-z-overlay:     200;
  --app-z-modal:       300;
  --app-z-toast:       400;

  /* ── Semantic aliases (resolved from theme) ── */
  --background:       hsl(var(--app-background));
  --background-alt:   hsl(var(--app-background-alt));
  --card:             hsl(var(--app-card));
  --foreground:       hsl(var(--app-foreground));
  --muted:            hsl(var(--app-foreground-muted));
  --border:           hsl(var(--app-border));
  --primary:          hsl(var(--app-primary));
  --success:          hsl(var(--app-success));
  --warning:          hsl(var(--app-warning));
  --destructive:      hsl(var(--app-destructive));
}