/**
 * Eclairion Design System — Token System
 * Full CSS custom properties for all design decisions.
 * Usage: import '@eclairion/ui/tokens.css' at root of your app.
 */

/* ── Typography ─────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Font families */
  --ec-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ec-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  /* Font sizes — Major Third scale (1.25) */
  --ec-text-xs:   0.64rem;   /* 10.24px */
  --ec-text-sm:   0.8rem;    /* 12.8px  */
  --ec-text-base: 1rem;      /* 16px    */
  --ec-text-md:   1.25rem;   /* 20px    */
  --ec-text-lg:   1.563rem;  /* 25px    */
  --ec-text-xl:   1.953rem;  /* 31.25px */
  --ec-text-2xl:  2.441rem;  /* 39px    */
  --ec-text-3xl:  3.052rem;  /* 48.8px  */

  /* Font weights */
  --ec-font-light:    300;
  --ec-font-regular:  400;
  --ec-font-medium:   500;
  --ec-font-semibold: 600;
  --ec-font-bold:     700;

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

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

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

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

  /* ── Transitions ──────────────────────────────────────────────────────────── */
  --ec-ease-linear:  linear;
  --ec-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ec-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ec-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ec-ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --ec-duration-instant: 0ms;
  --ec-duration-fast:    100ms;
  --ec-duration-base:    150ms;
  --ec-duration-slow:    300ms;
  --ec-duration-slower:  500ms;

  --ec-transition-base:   all var(--ec-duration-base) var(--ec-ease-in-out);
  --ec-transition-colors: color var(--ec-duration-base) var(--ec-ease-in-out),
                          background-color var(--ec-duration-base) var(--ec-ease-in-out),
                          border-color var(--ec-duration-base) var(--ec-ease-in-out),
                          fill var(--ec-duration-base) var(--ec-ease-in-out);
  --ec-transition-shadow: box-shadow var(--ec-duration-base) var(--ec-ease-in-out);
  --ec-transition-transform: transform var(--ec-duration-base) var(--ec-ease-in-out);

  /* ── Z-Index Scale ────────────────────────────────────────────────────────── */
  --ec-z-below:    -1;
  --ec-z-base:      0;
  --ec-z-raised:   10;
  --ec-z-dropdown: 100;
  --ec-z-sticky:   200;
  --ec-z-overlay:  300;
  --ec-z-modal:    400;
  --ec-z-popover:  500;
  --ec-z-toast:    600;
  --ec-z-tooltip:  700;

  /* ── Shadows ──────────────────────────────────────────────────────────────── */
  --ec-shadow-xs:    0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ec-shadow-sm:    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --ec-shadow-base:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --ec-shadow-md:    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --ec-shadow-lg:    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --ec-shadow-xl:    0 25px 50px -12px rgb(0 0 0 / 0.25);
  --ec-shadow-none:  none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK THEME — [data-theme="dark"]
   ══════════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"],
.ec-dark {
  /* Background layers */
  --ec-bg-base:      #0D0E1F;  /* Deepest background — canvas */
  --ec-bg-surface:   #171836;  /* Cards, panels, sidebars */
  --ec-bg-elevated:  #1E2040;  /* Popovers, dropdowns, modals */
  --ec-bg-inset:     #0A0B18;  /* Inputs, code blocks, sunken areas */
  --ec-bg-overlay:   rgba(13, 14, 31, 0.85); /* Modal backdrop */

  /* Borders */
  --ec-border-subtle:  #2A2D5A;  /* Subtle dividers */
  --ec-border-default: #333680;  /* Standard borders */
  --ec-border-strong:  #4A4FAA;  /* Focus, hover emphasis */
  --ec-border-focus:   #3FCFD5;  /* Focus ring */

  /* Text */
  --ec-text-primary:   #E8E6FF;  /* Primary content */
  --ec-text-secondary: #9B98C8;  /* Secondary, captions */
  --ec-text-tertiary:  #6660A0;  /* Placeholders, disabled */
  --ec-text-inverse:   #0D0E1F;  /* Text on accent bg */
  --ec-text-link:      #3FCFD5;  /* Interactive text */

  /* Accent / Brand */
  --ec-accent:         #3FCFD5;  /* Primary accent */
  --ec-accent-hover:   #52D8DE;  /* Accent hover */
  --ec-accent-active:  #2ABCC2;  /* Accent pressed */
  --ec-accent-muted:   rgba(63, 207, 213, 0.15);  /* Soft accent bg */
  --ec-accent-subtle:  #1E9EA3;  /* Darker accent variant */

  /* Semantic colors */
  --ec-success:        #22C55E;
  --ec-success-bg:     rgba(34, 197, 94, 0.12);
  --ec-success-border: rgba(34, 197, 94, 0.3);
  --ec-warning:        #F59E0B;
  --ec-warning-bg:     rgba(245, 158, 11, 0.12);
  --ec-warning-border: rgba(245, 158, 11, 0.3);
  --ec-danger:         #EF4444;
  --ec-danger-bg:      rgba(239, 68, 68, 0.12);
  --ec-danger-border:  rgba(239, 68, 68, 0.3);
  --ec-info:           #3B82F6;
  --ec-info-bg:        rgba(59, 130, 246, 0.12);
  --ec-info-border:    rgba(59, 130, 246, 0.3);

  /* Interactive states */
  --ec-hover-bg:    rgba(63, 207, 213, 0.06);
  --ec-active-bg:   rgba(63, 207, 213, 0.12);
  --ec-selected-bg: rgba(63, 207, 213, 0.15);

  /* Shadow adjustments for dark theme */
  --ec-shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --ec-shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --ec-shadow-md:   0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  --ec-shadow-glow: 0 0 20px rgba(63, 207, 213, 0.2), 0 0 40px rgba(63, 207, 213, 0.05);

  /* Component specifics */
  --ec-scrollbar-thumb: #2A2D5A;
  --ec-scrollbar-track: #0D0E1F;
  --ec-selection-bg:    rgba(63, 207, 213, 0.25);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT THEME — [data-theme="light"]
   ══════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"],
.ec-light {
  /* Background layers */
  --ec-bg-base:      #F8FAFC;  /* Page canvas */
  --ec-bg-surface:   #FFFFFF;  /* Cards, panels */
  --ec-bg-elevated:  #F1F5F9;  /* Popovers, dropdowns */
  --ec-bg-inset:     #E2E8F0;  /* Inputs, code blocks */
  --ec-bg-overlay:   rgba(248, 250, 252, 0.85); /* Modal backdrop */

  /* Borders */
  --ec-border-subtle:  #E2E8F0;  /* Subtle dividers */
  --ec-border-default: #CBD5E1;  /* Standard borders */
  --ec-border-strong:  #94A3B8;  /* Emphasis borders */
  --ec-border-focus:   #0F9BA0;  /* Focus ring */

  /* Text */
  --ec-text-primary:   #1A1B2E;  /* Primary content */
  --ec-text-secondary: #64748B;  /* Secondary, captions */
  --ec-text-tertiary:  #94A3B8;  /* Placeholders, disabled */
  --ec-text-inverse:   #FFFFFF;  /* Text on accent bg */
  --ec-text-link:      #0F9BA0;  /* Interactive text */

  /* Accent / Brand */
  --ec-accent:         #0F9BA0;  /* Primary accent */
  --ec-accent-hover:   #0D8A8F;  /* Accent hover */
  --ec-accent-active:  #0B7A7E;  /* Accent pressed */
  --ec-accent-muted:   rgba(15, 155, 160, 0.1);  /* Soft accent bg */
  --ec-accent-subtle:  #0D7A7E;  /* Darker accent variant */

  /* Semantic colors */
  --ec-success:        #16A34A;
  --ec-success-bg:     rgba(22, 163, 74, 0.08);
  --ec-success-border: rgba(22, 163, 74, 0.25);
  --ec-warning:        #D97706;
  --ec-warning-bg:     rgba(217, 119, 6, 0.08);
  --ec-warning-border: rgba(217, 119, 6, 0.25);
  --ec-danger:         #DC2626;
  --ec-danger-bg:      rgba(220, 38, 38, 0.08);
  --ec-danger-border:  rgba(220, 38, 38, 0.25);
  --ec-info:           #2563EB;
  --ec-info-bg:        rgba(37, 99, 235, 0.08);
  --ec-info-border:    rgba(37, 99, 235, 0.25);

  /* Interactive states */
  --ec-hover-bg:    rgba(15, 155, 160, 0.05);
  --ec-active-bg:   rgba(15, 155, 160, 0.1);
  --ec-selected-bg: rgba(15, 155, 160, 0.12);

  /* Component specifics */
  --ec-scrollbar-thumb: #CBD5E1;
  --ec-scrollbar-track: #F8FAFC;
  --ec-selection-bg:    rgba(15, 155, 160, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   GLOBAL BASE STYLES — .ec-root
   Apply to your root element or <html> tag.
   ══════════════════════════════════════════════════════════════════════════════ */
.ec-root {
  font-family: var(--ec-font-sans);
  font-size: var(--ec-text-base);
  font-weight: var(--ec-font-regular);
  line-height: var(--ec-leading-normal);
  color: var(--ec-text-primary);
  background-color: var(--ec-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
.ec-root *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ec-root *::-webkit-scrollbar-track {
  background: var(--ec-scrollbar-track, transparent);
  border-radius: var(--ec-radius-full);
}

.ec-root *::-webkit-scrollbar-thumb {
  background: var(--ec-scrollbar-thumb, #CBD5E1);
  border-radius: var(--ec-radius-full);
}

.ec-root *::-webkit-scrollbar-thumb:hover {
  background: var(--ec-border-strong);
}

/* ── Text Selection ───────────────────────────────────────────────────────── */
.ec-root ::selection {
  background-color: var(--ec-selection-bg);
  color: var(--ec-text-primary);
}

/* ── Focus Visible ────────────────────────────────────────────────────────── */
.ec-root *:focus-visible {
  outline: 2px solid var(--ec-border-focus);
  outline-offset: 2px;
  border-radius: var(--ec-radius-sm);
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ec-root *,
  .ec-root *::before,
  .ec-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Base resets for ec- components ──────────────────────────────────────── */
.ec-root *,
.ec-root *::before,
.ec-root *::after {
  box-sizing: border-box;
}