/* ============================================================
   DESIGN TOKENS — CSS Custom Properties
   Gestoque Style Guide
   ============================================================ */

:root {
  /* ---- Color Palette ---- */
  --color-brand-50:  #eef2ff;
  --color-brand-100: #e0e7ff;
  --color-brand-200: #c7d2fe;
  --color-brand-500: #6366f1;
  --color-brand-600: #4f46e5;
  --color-brand-700: #4338ca;

  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  --color-success-light: #d1fae5;
  --color-success-base:  #059669;
  --color-success-dark:  #065f46;

  --color-warning-light: #fef3c7;
  --color-warning-base:  #d97706;
  --color-warning-dark:  #92400e;

  --color-danger-light: #fee2e2;
  --color-danger-base:  #dc2626;
  --color-danger-dark:  #991b1b;

  --color-info-light: #dbeafe;
  --color-info-base:  #2563eb;
  --color-info-dark:  #1e40af;

  /* ---- Semantic Colors ---- */
  --color-bg:           var(--color-neutral-50);
  --color-surface:      var(--color-neutral-0);
  --color-border:       var(--color-neutral-200);
  --color-border-focus: var(--color-brand-600);
  --color-text:         var(--color-neutral-800);
  --color-text-muted:   var(--color-neutral-400);
  --color-text-subtle:  var(--color-neutral-500);
  --color-brand:        var(--color-brand-600);
  --color-brand-hover:  var(--color-brand-700);

  /* ---- Typography ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ---- Spacing scale (base 4px) ---- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ---- Border radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---- Elevation / Shadows ---- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);

  /* ---- Transitions ---- */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 300ms ease;

  /* ---- Z-Index scale ---- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 200;
  --z-sticky:   100;
  --z-modal:    400;
  --z-toast:    600;

  /* ---- Layout ---- */
  --container-max:     1100px;
  --container-pad-x:   var(--space-4);
  --header-height:     64px;

  /* ---- Breakpoints (reference only, use in @media) ----
     --bp-sm:  480px
     --bp-md:  768px
     --bp-lg: 1024px
     --bp-xl: 1280px
  ---- */
}