/*! 9ui Design Tokens v1.0 | MIT License | https://9ui.dev */

/* ─────────────────────────────────────────────
   LIGHT MODE (Default)
───────────────────────────────────────────── */
:root {
  /* Colors */
  --ui-background:        0 0% 100%;
  --ui-foreground:        240 10% 3.9%;
  --ui-card:              0 0% 100%;
  --ui-card-foreground:   240 10% 3.9%;
  --ui-card-border:       240 5.9% 90%;
  --ui-popover:           0 0% 100%;
  --ui-popover-foreground: 240 10% 3.9%;
  --ui-primary:           262 83% 58%;
  --ui-primary-foreground: 0 0% 100%;
  --ui-secondary:         240 4.8% 95.9%;
  --ui-secondary-foreground: 240 5.9% 10%;
  --ui-muted:             240 4.8% 95.9%;
  --ui-muted-foreground:  240 3.8% 46.1%;
  --ui-accent:            262 83% 58%;
  --ui-accent-foreground: 0 0% 100%;
  --ui-destructive:       0 84.2% 60.2%;
  --ui-destructive-foreground: 0 0% 98%;
  --ui-border:            240 5.9% 90%;
  --ui-input:             240 5.9% 90%;
  --ui-ring:              262 83% 58%;

  /* Semantic colors */
  --ui-success:           158 64% 52%;
  --ui-success-foreground: 0 0% 100%;
  --ui-warning:           43 96% 56%;
  --ui-warning-foreground: 240 10% 3.9%;
  --ui-info:              201 96% 32%;
  --ui-info-foreground:   0 0% 100%;

  /* Chart colors */
  --ui-chart-1: 262 83% 58%;
  --ui-chart-2: 201 96% 32%;
  --ui-chart-3: 326 100% 60%;
  --ui-chart-4: 43 96% 56%;
  --ui-chart-5: 158 64% 52%;

  /* Typography */
  --ui-font-sans:  'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --ui-font-serif: Georgia, 'Times New Roman', serif;
  --ui-font-mono:  'Geist Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;

  /* Type scale */
  --ui-text-xs:   0.75rem;    /* 12px */
  --ui-text-sm:   0.875rem;   /* 14px */
  --ui-text-base: 1rem;       /* 16px */
  --ui-text-lg:   1.125rem;   /* 18px */
  --ui-text-xl:   1.25rem;    /* 20px */
  --ui-text-2xl:  1.5rem;     /* 24px */
  --ui-text-3xl:  1.875rem;   /* 30px */
  --ui-text-4xl:  2.25rem;    /* 36px */
  --ui-text-5xl:  3rem;       /* 48px */
  --ui-text-6xl:  3.75rem;    /* 60px */
  --ui-text-7xl:  4.5rem;     /* 72px */

  /* Fluid type scale (clamp) */
  --ui-text-fluid-sm:   clamp(0.875rem, 2vw, 1rem);
  --ui-text-fluid-base: clamp(1rem, 2.5vw, 1.125rem);
  --ui-text-fluid-lg:   clamp(1.125rem, 3vw, 1.5rem);
  --ui-text-fluid-xl:   clamp(1.5rem, 4vw, 2.25rem);
  --ui-text-fluid-2xl:  clamp(2rem, 5vw, 3rem);
  --ui-text-fluid-3xl:  clamp(2.5rem, 7vw, 4.5rem);

  /* Font weights */
  --ui-font-light:    300;
  --ui-font-regular:  400;
  --ui-font-medium:   500;
  --ui-font-semibold: 600;
  --ui-font-bold:     700;
  --ui-font-extrabold: 800;
  --ui-font-black:    900;

  /* Line heights */
  --ui-leading-none:    1;
  --ui-leading-tight:   1.25;
  --ui-leading-snug:    1.375;
  --ui-leading-normal:  1.5;
  --ui-leading-relaxed: 1.625;
  --ui-leading-loose:   2;

  /* Letter spacing */
  --ui-tracking-tighter: -0.05em;
  --ui-tracking-tight:   -0.025em;
  --ui-tracking-normal:   0em;
  --ui-tracking-wide:     0.025em;
  --ui-tracking-wider:    0.05em;
  --ui-tracking-widest:   0.1em;

  /* Spacing scale */
  --ui-space-px:  1px;
  --ui-space-0:   0;
  --ui-space-0-5: 0.125rem;  /* 2px */
  --ui-space-1:   0.25rem;   /* 4px */
  --ui-space-1-5: 0.375rem;  /* 6px */
  --ui-space-2:   0.5rem;    /* 8px */
  --ui-space-2-5: 0.625rem;  /* 10px */
  --ui-space-3:   0.75rem;   /* 12px */
  --ui-space-3-5: 0.875rem;  /* 14px */
  --ui-space-4:   1rem;      /* 16px */
  --ui-space-5:   1.25rem;   /* 20px */
  --ui-space-6:   1.5rem;    /* 24px */
  --ui-space-7:   1.75rem;   /* 28px */
  --ui-space-8:   2rem;      /* 32px */
  --ui-space-9:   2.25rem;   /* 36px */
  --ui-space-10:  2.5rem;    /* 40px */
  --ui-space-12:  3rem;      /* 48px */
  --ui-space-14:  3.5rem;    /* 56px */
  --ui-space-16:  4rem;      /* 64px */
  --ui-space-20:  5rem;      /* 80px */
  --ui-space-24:  6rem;      /* 96px */
  --ui-space-32:  8rem;      /* 128px */
  --ui-space-40:  10rem;     /* 160px */
  --ui-space-48:  12rem;     /* 192px */
  --ui-space-64:  16rem;     /* 256px */

  /* Border radius */
  --ui-radius-none:  0;
  --ui-radius-sm:    0.125rem;  /* 2px */
  --ui-radius-base:  0.25rem;   /* 4px */
  --ui-radius-md:    0.375rem;  /* 6px */
  --ui-radius-lg:    0.5rem;    /* 8px */
  --ui-radius-xl:    0.75rem;   /* 12px */
  --ui-radius-2xl:   1rem;      /* 16px */
  --ui-radius-3xl:   1.5rem;    /* 24px */
  --ui-radius-full:  9999px;

  /* Shadows */
  --ui-shadow-2xs: 0 1px 2px rgba(0,0,0,0.04);
  --ui-shadow-xs:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --ui-shadow-sm:  0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --ui-shadow:     0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --ui-shadow-md:  0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --ui-shadow-lg:  0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
  --ui-shadow-xl:  0 25px 50px rgba(0,0,0,0.12);
  --ui-shadow-2xl: 0 50px 100px rgba(0,0,0,0.15);
  --ui-shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);
  --ui-shadow-none: none;

  /* Z-index scale */
  --ui-z-0:      0;
  --ui-z-10:     10;
  --ui-z-20:     20;
  --ui-z-30:     30;
  --ui-z-40:     40;
  --ui-z-50:     50;
  --ui-z-sticky: 100;
  --ui-z-overlay: 200;
  --ui-z-modal:  300;
  --ui-z-toast:  400;
  --ui-z-tooltip: 500;

  /* Transitions */
  --ui-duration-fast:   100ms;
  --ui-duration-normal: 200ms;
  --ui-duration-slow:   300ms;
  --ui-duration-slower: 500ms;
  --ui-ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ui-ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ui-ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ui-ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Layout */
  --ui-container-sm:  640px;
  --ui-container-md:  768px;
  --ui-container-lg:  1024px;
  --ui-container-xl:  1280px;
  --ui-container-2xl: 1536px;
  --ui-container-narrow: 680px;
  --ui-container-wide: 1400px;
}

/* ─────────────────────────────────────────────
   DARK MODE
───────────────────────────────────────────── */
.dark, [data-theme="dark"] {
  --ui-background:        240 10% 3.9%;
  --ui-foreground:        0 0% 98%;
  --ui-card:              240 10% 3.9%;
  --ui-card-foreground:   0 0% 98%;
  --ui-card-border:       240 3.7% 15.9%;
  --ui-popover:           240 10% 3.9%;
  --ui-popover-foreground: 0 0% 98%;
  --ui-primary:           263 70% 60%;
  --ui-primary-foreground: 0 0% 100%;
  --ui-secondary:         240 3.7% 15.9%;
  --ui-secondary-foreground: 0 0% 98%;
  --ui-muted:             240 3.7% 15.9%;
  --ui-muted-foreground:  240 5% 64.9%;
  --ui-accent:            240 3.7% 15.9%;
  --ui-accent-foreground: 0 0% 98%;
  --ui-destructive:       0 62.8% 30.6%;
  --ui-destructive-foreground: 0 0% 98%;
  --ui-border:            240 3.7% 15.9%;
  --ui-input:             240 3.7% 15.9%;
  --ui-ring:              263 70% 60%;

  --ui-shadow-2xs: 0 1px 2px rgba(0,0,0,0.5);
  --ui-shadow-xs:  0 1px 3px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4);
  --ui-shadow-sm:  0 1px 3px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
  --ui-shadow:     0 4px 6px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5);
  --ui-shadow-md:  0 10px 15px rgba(0,0,0,0.8), 0 4px 6px rgba(0,0,0,0.5);
  --ui-shadow-lg:  0 20px 25px rgba(0,0,0,0.8), 0 10px 10px rgba(0,0,0,0.5);
  --ui-shadow-xl:  0 25px 50px rgba(0,0,0,0.8);
}

/* ─────────────────────────────────────────────
   THEMES
───────────────────────────────────────────── */
[data-theme="minimal"] {
  --ui-primary:           0 0% 10%;
  --ui-primary-foreground: 0 0% 100%;
  --ui-accent:            0 0% 10%;
  --ui-ring:              0 0% 10%;
  --ui-radius-lg:         0.125rem;
  --ui-radius-xl:         0.25rem;
  --ui-radius-2xl:        0.375rem;
}

[data-theme="moneybull"] {
  --ui-primary:           158 64% 52%;
  --ui-primary-foreground: 0 0% 0%;
  --ui-accent:            158 64% 52%;
  --ui-ring:              158 64% 52%;
}

[data-theme="9romit"] {
  --ui-primary:           201 96% 32%;
  --ui-primary-foreground: 0 0% 100%;
  --ui-accent:            201 96% 32%;
  --ui-ring:              201 96% 32%;
}