stack-chan

@import 'tailwindcss';
@import 'tw-animate-css';
@import '@fontsource-variable/geist';

/*
 * shadcn is a source generator, not a runtime dependency. Keep the Base UI
 * state aliases used by the generated components local to this application.
 */
@custom-variant data-open {
  &:where([data-state='open']),
  &:where([data-open]:not([data-open='false'])) {
    @slot;
  }
}

@custom-variant data-closed {
  &:where([data-state='closed']),
  &:where([data-closed]:not([data-closed='false'])) {
    @slot;
  }
}

@custom-variant data-checked {
  &:where([data-state='checked']),
  &:where([data-checked]:not([data-checked='false'])) {
    @slot;
  }
}

@custom-variant data-disabled {
  &:where([data-disabled='true']),
  &:where([data-disabled]:not([data-disabled='false'])) {
    @slot;
  }
}

@custom-variant data-active {
  &:where([data-state='active']),
  &:where([data-active]:not([data-active='false'])) {
    @slot;
  }
}

@custom-variant data-horizontal {
  &:where([data-orientation='horizontal']) {
    @slot;
  }
}

@custom-variant data-vertical {
  &:where([data-orientation='vertical']) {
    @slot;
  }
}

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-heading: var(--font-sans);
  --font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-console: var(--console);
  --color-console-foreground: var(--console-foreground);
  --color-simulator-stage: var(--simulator-stage);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
}

:root {
  --background: oklch(0.985 0.006 230);
  --foreground: oklch(0.22 0.018 235);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.018 235);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.22 0.018 235);
  --primary: oklch(0.59 0.14 224);
  --primary-foreground: oklch(0.99 0.004 225);
  --secondary: oklch(0.94 0.018 225);
  --secondary-foreground: oklch(0.27 0.03 230);
  --muted: oklch(0.955 0.01 230);
  --muted-foreground: oklch(0.48 0.025 230);
  --accent: oklch(0.92 0.045 220);
  --accent-foreground: oklch(0.27 0.04 228);
  --destructive: oklch(0.58 0.23 25);
  --border: oklch(0.86 0.02 230);
  --input: oklch(0.82 0.025 230);
  --ring: oklch(0.59 0.14 224);
  --success: oklch(0.62 0.16 152);
  --success-foreground: oklch(0.985 0.01 150);
  --warning: oklch(0.78 0.15 78);
  --warning-foreground: oklch(0.27 0.055 60);
  --console: oklch(0.18 0.018 235);
  --console-foreground: oklch(0.9 0.02 220);
  --simulator-stage: oklch(0.9 0.018 230);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.16 0.015 235);
  --foreground: oklch(0.94 0.012 225);
  --card: oklch(0.205 0.018 235);
  --card-foreground: oklch(0.94 0.012 225);
  --popover: oklch(0.215 0.018 235);
  --popover-foreground: oklch(0.94 0.012 225);
  --primary: oklch(0.71 0.13 220);
  --primary-foreground: oklch(0.16 0.025 230);
  --secondary: oklch(0.27 0.02 235);
  --secondary-foreground: oklch(0.94 0.012 225);
  --muted: oklch(0.25 0.016 235);
  --muted-foreground: oklch(0.69 0.023 225);
  --accent: oklch(0.3 0.045 225);
  --accent-foreground: oklch(0.95 0.014 220);
  --destructive: oklch(0.68 0.2 25);
  --border: oklch(0.35 0.02 235);
  --input: oklch(0.39 0.025 235);
  --ring: oklch(0.71 0.13 220);
  --success: oklch(0.72 0.15 152);
  --success-foreground: oklch(0.16 0.035 152);
  --warning: oklch(0.8 0.14 78);
  --warning-foreground: oklch(0.2 0.05 60);
  --console: oklch(0.115 0.014 235);
  --console-foreground: oklch(0.9 0.02 220);
  --simulator-stage: oklch(0.12 0.012 235);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  html {
    @apply font-sans;
    color-scheme: light;
  }

  html.dark {
    color-scheme: dark;
  }

  body {
    @apply m-0 min-w-80 bg-background text-foreground antialiased;
    min-height: 100dvh;
  }

  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }

  code,
  pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }

  ::selection {
    @apply bg-primary/25;
  }

  .blocklyWidgetDiv,
  .blocklyDropDownDiv,
  .blocklyTooltipDiv {
    z-index: 30 !important;
  }

  /*
   * Blockly hides flyout scrollbars with an SVG presentation attribute.
   * Restore that state after Tailwind Preflight's `svg { display: block }`.
   */
  .blocklyFlyoutScrollbar[display='none'] {
    display: none;
  }
}

@layer utilities {
  .page-container {
    @apply mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8;
  }

  .page-heading {
    @apply text-2xl font-semibold tracking-tight sm:text-3xl;
  }

  .page-lead {
    @apply mt-2 max-w-3xl text-sm leading-6 text-muted-foreground sm:text-base;
  }
}