/* ============================================================
   TileStudio.AI — Design System Tokens
   Source: webapp/src/index.css + tailwind.config.ts
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ── Color Tokens (Light Mode) ─────────────────────────────── */
:root {
  /* Backgrounds */
  --ts-bg:           hsl(0 0% 100%);       /* #FFFFFF — page background */
  --ts-bg-dark:      hsl(222 47% 6%);      /* #060A12 — dark mode background */
  --ts-card:         hsl(210 20% 98%);     /* #F8FAFC — card surface */
  --ts-muted:        hsl(210 40% 96%);     /* #F1F5F9 — muted chip/secondary bg */

  /* Foregrounds */
  --ts-fg1:          hsl(222 47% 11%);     /* #0F172A — primary text */
  --ts-fg2:          hsl(215 16% 47%);     /* #64748B — secondary/muted text */
  --ts-fg-inverted:  hsl(0 0% 100%);       /* #FFFFFF — text on dark/primary */

  /* Borders */
  --ts-border:       hsl(214 32% 91%);     /* #E2E8F0 — standard border */
  --ts-input:        hsl(214 32% 91%);     /* #E2E8F0 — input border */
  --ts-ring:         hsl(239 84% 67%);     /* focus ring = primary */

  /* Brand / Primary — Indigo */
  --ts-primary:      hsl(239 84% 67%);     /* #5B6CF9 — indigo CTA */
  --ts-primary-fg:   hsl(0 0% 100%);       /* white text on primary */
  --ts-primary-10:   hsl(239 84% 67% / 0.10); /* tint bg */
  --ts-primary-20:   hsl(239 84% 67% / 0.20);

  /* Semantic */
  --ts-destructive:  hsl(0 72% 51%);       /* #E53E3E — error/delete */
  --ts-success:      hsl(142 70% 45%);     /* #22C55E — success/check */
  --ts-warning:      hsl(38 92% 50%);      /* #F59E0B — low credits amber */
  --ts-warning-bg:   hsl(48 100% 96%);     /* #FFFBEB — amber chip bg */
  --ts-warning-fg:   hsl(32 95% 44%);      /* #B45309 — amber chip text */

  /* Tatooine White-label Accent (sandstone/amber palette) */
  --ts-tatooine:       hsl(25 95% 45%);    /* #DC6B0B — amber CTA */
  --ts-tatooine-bg:    hsl(35 40% 92%);    /* #EFE3CF — sandstone chip bg */
  --ts-tatooine-fg:    hsl(25 50% 15%);    /* #3D1A05 — dark text on sandstone */
  --ts-tatooine-light: hsl(38 45% 96%);    /* #FAF3E8 — hover state */

  /* Radius */
  --ts-radius:       0.625rem;   /* 10px — base */
  --ts-radius-sm:    0.375rem;   /* 6px */
  --ts-radius-lg:    0.75rem;    /* 12px */
  --ts-radius-xl:    0.875rem;   /* 14px */
  --ts-radius-full:  9999px;     /* pill */

  /* Shadows (minimal — used sparingly) */
  --ts-shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ts-shadow-md:    0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);

  /* Sidebar (inherits from card/primary) */
  --ts-sidebar-bg:     hsl(210 20% 98%);
  --ts-sidebar-border: hsl(214 32% 91%);
  --ts-sidebar-primary: hsl(239 84% 67%);
}

/* ── Dark Mode Overrides ────────────────────────────────────── */
.dark, [data-theme="dark"] {
  --ts-bg:      hsl(222 47% 6%);
  --ts-card:    hsl(222 47% 9%);
  --ts-muted:   hsl(222 47% 14%);
  --ts-fg1:     hsl(210 40% 98%);
  --ts-fg2:     hsl(215 16% 57%);
  --ts-border:  hsl(222 47% 16%);
  --ts-input:   hsl(222 47% 16%);
  --ts-sidebar-bg:     hsl(222 47% 9%);
  --ts-sidebar-border: hsl(222 47% 16%);
}

/* ── shadcn/ui compatibility aliases ───────────────────────── */
:root {
  --background:         var(--ts-bg);
  --foreground:         var(--ts-fg1);
  --card:               var(--ts-card);
  --card-foreground:    var(--ts-fg1);
  --popover:            var(--ts-bg);
  --popover-foreground: var(--ts-fg1);
  --primary:            239 84% 67%;
  --primary-foreground: 0 0% 100%;
  --secondary:          210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted:              210 40% 96%;
  --muted-foreground:   215 16% 47%;
  --accent:             210 40% 96%;
  --accent-foreground:  222 47% 11%;
  --destructive:        0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border:             214 32% 91%;
  --input:              214 32% 91%;
  --ring:               239 84% 67%;
  --radius:             0.625rem;
}

/* ── Typography ─────────────────────────────────────────────── */
:root {
  --ts-font-sans:    'DM Sans', system-ui, sans-serif;
  --ts-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;

  /* Scale */
  --ts-text-hero:    clamp(2.5rem, 5vw, 3.75rem);  /* ~60px hero H1 */
  --ts-text-h1:      2.25rem;   /* 36px */
  --ts-text-h2:      1.5rem;    /* 24px */
  --ts-text-h3:      1.25rem;   /* 20px */
  --ts-text-h4:      1.125rem;  /* 18px */
  --ts-text-lg:      1.125rem;  /* 18px */
  --ts-text-base:    1rem;      /* 16px */
  --ts-text-sm:      0.875rem;  /* 14px */
  --ts-text-xs:      0.75rem;   /* 12px */
  --ts-text-2xs:     0.625rem;  /* 10px */
  --ts-text-micro:   0.5625rem; /* 9px  — eyebrow labels */

  /* Weight */
  --ts-weight-light:    300;
  --ts-weight-normal:   400;
  --ts-weight-medium:   500;
  --ts-weight-semibold: 600;
  --ts-weight-bold:     700;

  /* Leading */
  --ts-leading-tight:   1.05;
  --ts-leading-snug:    1.375;
  --ts-leading-normal:  1.5;
  --ts-leading-relaxed: 1.625;

  /* Tracking */
  --ts-tracking-tight:  -0.01em;
  --ts-tracking-normal: 0;
  --ts-tracking-wide:   0.025em;
  --ts-tracking-eyebrow: 0.18em;   /* 10px uppercase labels */
  --ts-tracking-eyebrow-lg: 0.25em; /* wider, studio date headers */
}

/* ── Semantic Type Styles ───────────────────────────────────── */
.ts-hero {
  font-family: var(--ts-font-sans);
  font-size: var(--ts-text-hero);
  font-weight: var(--ts-weight-bold);
  line-height: var(--ts-leading-tight);
  letter-spacing: var(--ts-tracking-tight);
  color: var(--ts-fg1);
}
.ts-h1 {
  font-family: var(--ts-font-sans);
  font-size: var(--ts-text-h1);
  font-weight: var(--ts-weight-semibold);
  line-height: 1.2;
  color: var(--ts-fg1);
}
.ts-h2 {
  font-family: var(--ts-font-sans);
  font-size: var(--ts-text-h2);
  font-weight: var(--ts-weight-semibold);
  line-height: 1.3;
  color: var(--ts-fg1);
}
.ts-h3 {
  font-family: var(--ts-font-sans);
  font-size: var(--ts-text-h3);
  font-weight: var(--ts-weight-semibold);
  line-height: 1.4;
  color: var(--ts-fg1);
}
.ts-body {
  font-family: var(--ts-font-sans);
  font-size: var(--ts-text-base);
  font-weight: var(--ts-weight-normal);
  line-height: var(--ts-leading-relaxed);
  color: var(--ts-fg1);
}
.ts-body-sm {
  font-family: var(--ts-font-sans);
  font-size: var(--ts-text-sm);
  font-weight: var(--ts-weight-normal);
  line-height: var(--ts-leading-normal);
  color: var(--ts-fg2);
}
.ts-caption {
  font-family: var(--ts-font-sans);
  font-size: var(--ts-text-xs);
  font-weight: var(--ts-weight-normal);
  line-height: var(--ts-leading-normal);
  color: var(--ts-fg2);
}
.ts-eyebrow {
  font-family: var(--ts-font-sans);
  font-size: var(--ts-text-micro);
  font-weight: var(--ts-weight-semibold);
  letter-spacing: var(--ts-tracking-eyebrow-lg);
  text-transform: uppercase;
  color: var(--ts-primary);
}
.ts-code {
  font-family: var(--ts-font-mono);
  font-size: var(--ts-text-xs);
  color: var(--ts-fg1);
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes ts-shimmer-sweep {
  0%   { background-position: -200% center; }
  50%  { background-position:  200% center; }
  100% { background-position: -200% center; }
}
@keyframes ts-glow-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.8; }
}
@keyframes ts-fade-slide-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ts-fade-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.ts-anim-shimmer {
  animation: ts-shimmer-sweep 6s ease-in-out infinite;
}
.ts-anim-glow {
  animation: ts-glow-pulse 3s ease-in-out infinite;
}
.ts-anim-enter {
  animation: ts-fade-slide-up 0.5s ease-out both;
}
.ts-anim-scale-in {
  animation: ts-fade-scale-in 0.45s ease-out both;
}