/* ==========================================================================
   2026.css — Global custom styles
   Loaded after index.css (Tailwind). Write any global overrides,
   shared animations, or cross-component styles here.
   ========================================================================== */

:root,
[data-theme="light"] .--light {
  /* ===== PRIMITIVE COLORS ===== */

  /* neon green */
  --primary-hue: 25;

  /* orange */
  --secondary-hue: 13;
  /* light cyan */
  --tertiary-hue: 100;
  /* dark green */
  --quaternary-hue: 104;
  /* Red */
  --quinary-hue: 10;

  --t3di__color-primary-1: hsl(var(--primary-hue), 95%, 50%);
  --t3di__color-primary-2: hsl(var(--primary-hue), 95%, 55%);
  --t3di__color-primary-3: hsl(var(--primary-hue), 95%, 60%);
  --t3di__color-primary-4: hsl(var(--primary-hue), 95%, 65%);
  --t3di__color-primary-5: hsl(var(--primary-hue), 95%, 70%);
  --t3di__color-primary-6: hsl(var(--primary-hue), 95%, 75%);
  --t3di__color-primary-7: hsl(var(--primary-hue), 95%, 80%);
  --t3di__color-primary-8: hsl(var(--primary-hue), 95%, 85%);
  --t3di__color-primary-9: hsl(var(--primary-hue), 95%, 90%);
  --t3di__color-primary-10: hsl(var(--primary-hue), 95%, 94%);

  --t3di__color-secondary-1: hsl(var(--secondary-hue), 95%, 50%);
  --t3di__color-secondary-2: hsl(var(--secondary-hue), 95%, 59%);
  --t3di__color-secondary-3: hsl(var(--secondary-hue), 95%, 62%);
  --t3di__color-secondary-4: hsl(var(--secondary-hue), 95%, 65%);
  --t3di__color-secondary-5: hsl(var(--secondary-hue), 95%, 70%);
  --t3di__color-secondary-6: hsl(var(--secondary-hue), 95%, 75%);
  --t3di__color-secondary-7: hsl(var(--secondary-hue), 95%, 80%);
  --t3di__color-secondary-8: hsl(var(--secondary-hue), 95%, 85%);
  --t3di__color-secondary-9: hsl(var(--secondary-hue), 95%, 90%);
  --t3di__color-secondary-10: hsl(var(--secondary-hue), 95%, 95%);

  --t3di__color-tertiary-1: hsl(var(--tertiary-hue), 85%, 45%);
  --t3di__color-tertiary-2: hsl(var(--tertiary-hue), 85%, 51%);
  --t3di__color-tertiary-3: hsl(var(--tertiary-hue), 85%, 60%);
  --t3di__color-tertiary-4: hsl(var(--tertiary-hue), 85%, 65%);
  --t3di__color-tertiary-5: hsl(var(--tertiary-hue), 85%, 70%);
  --t3di__color-tertiary-6: hsl(var(--tertiary-hue), 85%, 75%);
  --t3di__color-tertiary-7: hsl(var(--tertiary-hue), 85%, 80%);
  --t3di__color-tertiary-8: hsl(var(--tertiary-hue), 85%, 85%);
  --t3di__color-tertiary-9: hsl(var(--tertiary-hue), 85%, 90%);
  --t3di__color-tertiary-10: hsl(var(--tertiary-hue), 85%, 95%);

  --t3di__color-quaternary-1: hsl(var(--quaternary-hue), 50%, 50%);
  --t3di__color-quaternary-2: hsl(var(--quaternary-hue), 50%, 59%);
  --t3di__color-quaternary-3: hsl(var(--quaternary-hue), 50%, 62%);
  --t3di__color-quaternary-4: hsl(var(--quaternary-hue), 50%, 65%);
  --t3di__color-quaternary-5: hsl(var(--quaternary-hue), 50%, 70%);
  --t3di__color-quaternary-6: hsl(var(--quaternary-hue), 50%, 75%);
  --t3di__color-quaternary-7: hsl(var(--quaternary-hue), 50%, 80%);
  --t3di__color-quaternary-8: hsl(var(--quaternary-hue), 50%, 85%);
  --t3di__color-quaternary-9: hsl(var(--quaternary-hue), 50%, 90%);
  --t3di__color-quaternary-10: hsl(var(--quaternary-hue), 50%, 95%);

  --t3di__color-quinary-1: hsl(var(--quinary-hue), 90%, 53%);
  --t3di__color-quinary-2: hsl(var(--quinary-hue), 90%, 59%);
  --t3di__color-quinary-3: hsl(var(--quinary-hue), 90%, 62%);
  --t3di__color-quinary-4: hsl(var(--quinary-hue), 90%, 65%);
  --t3di__color-quinary-5: hsl(var(--quinary-hue), 90%, 70%);
  --t3di__color-quinary-6: hsl(var(--quinary-hue), 90%, 75%);
  --t3di__color-quinary-7: hsl(var(--quinary-hue), 90%, 80%);
  --t3di__color-quinary-8: hsl(var(--quinary-hue), 90%, 85%);
  --t3di__color-quinary-9: hsl(var(--quinary-hue), 90%, 90%);
  --t3di__color-quinary-10: hsl(var(--quinary-hue), 90%, 95%);

  --t3di__color-surface-1: hsl(var(--primary-hue), 6%, 100%);
  --t3di__color-surface-2: hsl(var(--primary-hue), 6%, 98%);
  --t3di__color-surface-3: hsl(var(--primary-hue), 8%, 97%);
  --t3di__color-surface-4: hsl(var(--primary-hue), 6%, 95%);
  --t3di__color-surface-5: hsl(var(--primary-hue), 6%, 90%);
  --t3di__color-surface-6: hsl(var(--primary-hue), 6%, 85%);
  --t3di__color-surface-7: hsl(var(--primary-hue), 6%, 80%);
  --t3di__color-surface-8: hsl(var(--primary-hue), 6%, 75%);
  --t3di__color-surface-9: hsl(var(--primary-hue), 6%, 70%);
  --t3di__color-surface-10: hsl(var(--primary-hue), 6%, 60%);

  --t3di__color-surface-11: hsl(var(--primary-hue), 6%, 55%);
  --t3di__color-surface-12: hsl(var(--primary-hue), 6%, 50%);
  --t3di__color-surface-13: hsl(var(--primary-hue), 6%, 45%);
  --t3di__color-surface-14: hsl(var(--primary-hue), 6%, 40%);
  --t3di__color-surface-15: hsl(var(--primary-hue), 6%, 35%);
  --t3di__color-surface-16: hsl(var(--primary-hue), 6%, 30%);
  --t3di__color-surface-17: hsl(var(--primary-hue), 6%, 25%);
  --t3di__color-surface-18: hsl(var(--primary-hue), 6%, 20%);
  --t3di__color-surface-19: hsl(var(--primary-hue), 6%, 15%);
  --t3di__color-surface-20: hsl(var(--primary-hue), 6%, 10%);

  --t3di__font-size: 16px;

  --t3di__border-radius: var(--t3di__space);
  --t3di__border-radius-sm: calc(var(--t3di__space) / 2);
  --t3di__animation-step: 0.125s;
  --t3di__animation-step-2x: 0.25s;
  --t3di__animation-step-4x: 0.5s;
  --t3di__focus-box-shadow: 0 0 0 0.0675em var(--t3di__color-primary-3);
  --t3di__focus-box-shadow-start: 0 0 0 0.0675em var(--t3di__color-primary-3);
  --t3di__focus-box-shadow-color: var(--t3di__color-primary-3);

  --t3di__screen-xl: 1680px;
  --t3di__screen-lg: 1280px;
  --t3di__screen-md: 1080px;
  --t3di__screen-sm: 736px;

  --t3di__space: 16px;
  --t3di__border-width: 1px;
  --t3di__modal__border-radius: 24px;

  --t3di__font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
  --t3di__font-mono: monospace, monospace;
  --t3di__font-family-mono: "IBM Plex Mono", monospace, monospace;

  /* TOKENS FOR LAYERING */

  /* === Foreground & Background TOKENS === */
  --t3di__color-foreground: hsl(var(--primary-hue), 81%, 11%);
  --t3di__color-foreground-fixed: hsl(var(--primary-hue), 81%, 11%);
  --t3di__color-background: hsl(var(--primary-hue), 4%, 98.75%);
  --t3di__color-foreground-inverse: hsl(var(--primary-hue), 15%, 15%);
  --t3di__color-background-brand: var(--t3di__color-primary-5);

  --t3di__white: #ffffff;
  --t3di__black: #000;

  --t3di__layer-1: var(--t3di__color-surface-1);
  --t3di__layer-2: var(--t3di__color-surface-3);
  --t3di__layer-3: var(--t3di__color-surface-5);
  --t3di__layer-4: var(--t3di__color-surface-5);

  --t3di__layer-inset: var(--t3di__white);

  --t3di__text-default: var(--t3di__color-foreground);
  --t3di__text-inverse: var(--t3di__color-background);
  --t3di__text-subtle: color-mix(
    in srgb,
    var(--t3di__color-foreground) 65%,
    transparent
  );
  --t3di__text-label: color-mix(
    in srgb,
    var(--t3di__color-foreground) 80%,
    transparent
  );
  --t3di__text-selected: color-mix(
    in srgb,
    var(--t3di__color-primary-1) 50%,
    var(--t3di__color-foreground) 50%
  );
  --t3di__text-placeholder: color-mix(
    in srgb,
    var(--t3di__color-foreground) 50%,
    transparent
  );
  --t3di__text-brand: var(--t3di__color-foreground);

  /* === Border TOKENS === */
  --t3di__border-default: var(--t3di__color-surface-7);
  --t3di__border-subtle: var(--t3di__color-surface-5);
  --t3di__border-strong: var(--t3di__color-foreground);
  --t3di__border-brand: var(--t3di__color-surface-20);
  --t3di__border-card: var(--t3di__color-surface-6);
  --t3di__border-card-alt: var(--t3di__color-surface-20);
  --t3di__border-dot: var(--t3di__color-surface-6);

  /* === Button TOKENS === */
  /* Primary Button */
  --t3di__button-primary-background: var(--t3di__color-primary-3);
  --t3di__button-primary-color: var(--t3di__text-inverse);
  --t3di__button-primary-border: var(--t3di__border-default);

  /* Secondary Button */
  --t3di__button-secondary-background: var(--t3di__color-surface-5);
  --t3di__button-secondary-color: var(--t3di__text-default);

  /* Neutral Button */
  --t3di__button-neutral-background: var(--t3di__color-surface-6);
  --t3di__button-neutral-color: var(--t3di__text-default);

  /* Tertiary Button */
  --t3di__button-tertiary-background: var(--t3di__color-tertiary-6);
  --t3di__button-tertiary-color: var(--t3di__text-default);

  /* Quaternary Button */
  --t3di__button-quaternary-background: color-mix(
    in srgb,
    var(--t3di__color-quaternary-1) 100%,
    var(--t3di__color-foreground) 50%
  );
  --t3di__button-quaternary-color: var(--t3di__text-inverse);

  /* Danger Button */
  --t3di__button-danger-background: var(--t3di__color-quinary-8);
  --t3di__button-danger-color: var(--t3di__color-quinary-1);

  /* Warning Button */
  --t3di__button-warning-background: var(--t3di__color-quaternary-3);

  /* ===== link TOKENS ===== */
  --t3di__link: var(--t3di__text-default);
  --t3di__link-primary: var(--t3di__color-primary-4);
  --t3di__link-primary-selected: var(--t3di__color-primary-4);
  --t3di__link-primary-disabled: var(--t3di__color-primary-4);

  @media (max-width: 1024px) {
    --t3di__space: calc(var(--t3di__font-size) * 1.25);
  }

  @media (max-width: 768px) {
    --t3di__space: calc(var(--t3di__font-size) * 1.125);
  }
}

[data-theme="brand"],
.--brand {
  --t3di__color-background: var(--t3di__color-primary-6);

  --t3di__layer-1: color-mix(
    in srgb,
    var(--t3di__color-primary-5) 100%,
    var(--t3di__color-background) 5%
  );
  --t3di__layer-2: color-mix(
    in srgb,
    var(--t3di__color-primary-4) 100%,
    var(--t3di__white) 41%
  );
  --t3di__layer-3: color-mix(
    in srgb,
    var(--t3di__color-primary-7) 100%,
    var(--t3di__color-background) 5%
  );
  --t3di__layer-4: color-mix(
    in srgb,
    var(--t3di__color-primary-8) 100%,
    var(--t3di__color-background) 5%
  );

  --t3di__border-default: color-mix(
    in srgb,
    var(--t3di__color-primary-1) 100%,
    var(--t3di__color-foreground) 10%
  );
  --t3di__border-subtle: color-mix(
    in srgb,
    var(--t3di__color-primary-1) 100%,
    var(--t3di__color-foreground) 3%
  );
  --t3di__border-card: color-mix(
    in srgb,
    var(--t3di__color-primary-1) 100%,
    var(--t3di__color-foreground) 3%
  );
  --t3di__border-dot: color-mix(
    in srgb,
    var(--t3di__color-primary-7) 100%,
    var(--t3di__color-foreground) 100%
  );

  --t3di__button-primary-background: var(--t3di__color-primary-7);
  --t3di__button-primary-color: var(--t3di__color-foreground);

  --t3di__button-secondary-background: var(--t3di__color-primary-8);
  --t3di__button-secondary-color: var(--t3di__color-foreground);

  --t3di__layer-inset: color-mix(
    in srgb,
    var(--t3di__color-primary-7) 60%,
    var(--t3di__white) 60%
  );

  --t3di__text-default: var(--t3di__black);
  --t3di__text-subtle: color-mix(in srgb, var(--t3di__black) 80%, transparent);
}

/* ===== DARK THEME  ===== */

[data-theme="dark"],
.--dark {
  /* TOKENS FOR LAYERING */

  --t3di__layer-1: var(--t3di__color-surface-20);
  --t3di__layer-2: var(--t3di__color-surface-19);
  --t3di__layer-3: var(--t3di__color-surface-16);
  --t3di__layer-4: var(--t3di__color-surface-15);

  --t3di__layer-inset: var(--t3di__black);

  /* === Foreground & Background TOKENS === */
  --t3di__color-foreground: hsl(var(--primary-hue), 4%, 97.5%);
  --t3di__color-background: hsl(var(--primary-hue), 6%, 10%);
  --t3di__color-foreground-inverse: hsl(var(--primary-hue), 15%, 15%);
  --t3di__color-background-brand: var(--t3di__color-primary-1);

  --t3di__text-default: var(--t3di__color-foreground);
  --t3di__text-inverse: var(--t3di__color-foreground-inverse);
  --t3di__text-subtle: var(--t3di__color-surface-8);
  --t3di__text-label: color-mix(
    in srgb,
    var(--t3di__color-foreground) 80%,
    transparent
  );
  --t3di__text-selected: color-mix(
    in srgb,
    var(--t3di__color-primary-1) 50%,
    var(--t3di__color-foreground) 50%
  );
  --t3di__text-placeholder: color-mix(
    in srgb,
    var(--t3di__color-foreground) 50%,
    transparent
  );
  --t3di__text-brand: var(--t3di__color-primary-3);

  /* === Border TOKENS === */
  --t3di__border-default: var(--t3di__color-surface-10);
  --t3di__border-subtle: var(--t3di__color-surface-16);
  --t3di__border-strong: var(--t3di__color-foreground);
  --t3di__border-brand: color-mix(
    in srgb,
    var(--t3di__color-primary-1) 50%,
    var(--t3di__color-background) 50%
  );
  --t3di__border-card: var(--t3di__color-surface-15);
  --t3di__border-card-alt: var(--t3di__color-surface-15);
  --t3di__border-dot: var(--t3di__color-surface-18);

  /* === Button TOKENS === */
  /* Primary Button */
  --t3di__button-primary-background: var(--t3di__color-primary-3);
  --t3di__button-primary-color: color-mix(
    in srgb,
    var(--t3di__color-primary-4) 10%,
    var(--t3di__color-background) 99%
  );
  --t3di__button-primary-border: color-mix(
    in srgb,
    var(--t3di__border-strong) 100%,
    transparent 100%
  );

  /* Secondary Button */
  --t3di__button-secondary-background: var(--t3di__color-secondary-4);
  --t3di__button-secondary-color: var(--t3di__text-inverse);

  /* Danger Button */
  --t3di__button-danger-background: var(--t3di__color-quinary-8);

  /* Warning Button */
  --t3di__button-warning-background: var(--t3di__color-quaternary-3);

  /* ===== link TOKENS ===== */
  --t3di__link: var(--t3di__text-default);
  --t3di__link-primary: var(--t3di__color-primary-4);
  --t3di__link-primary-selected: var(--t3di__color-primary-4);
  --t3di__link-primary-disabled: var(--t3di__color-primary-4);
}

.text-muted-foreground {
  color: var(--t3di__text-subtle);
}

/* ==========================================================================
   tedi-* form controls — mirrored from app/frontend/components/ui/{button,input,select}.css
   so Rails-rendered public pages look identical to the React SPA without
   loading the Vite bundle. Keep in sync when the React sources change.
   ========================================================================== */

/* --- .tedi-button base --- */
.tedi-button,
.primary-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.0375em;
  line-height: 1em;
  border-radius: var(--t3di__border-radius-sm);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t3di__animation-step) ease-in-out,
    box-shadow var(--t3di__animation-step) ease-in-out,
    border-color var(--t3di__animation-step) ease-in-out,
    background-color var(--t3di__animation-step) ease-in-out;
}

.tedi-button:focus-visible {
  outline: 0.25em solid var(--t3di__focus-box-shadow-color);
  outline-offset: 0.125em;
  box-shadow: var(--t3di__focus-box-shadow);
}

.tedi-button:active:not(:disabled) {
  transform: scale(0.975);
}

.tedi-button:disabled {
  opacity: 0.5;
}

.tedi-button:disabled:hover,
.tedi-button:disabled:active {
  transform: none;
}

.tedi-button svg {
  pointer-events: none;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.tedi-button[data-size="default"] {
  padding: 1em 1em;
  font-size: 0.875rem;
}

.primary-button,
.secondary-button {
  padding: 0.75em 1em;
}

.tedi-button[data-size="xs"] {
  padding: 0.375em 0.675em;
  font-size: 0.75em;
  font-weight: 400;
  line-height: 1.1;
  border-radius: calc(var(--t3di__border-radius-sm) / 2);
}

.tedi-button[data-size="sm"] {
  padding: 0.375rem 0.75rem;
  height: 2.25rem;
  font-size: 0.875rem;
  font-weight: 400;
  border-radius: calc(var(--t3di__border-radius-sm) / 3);
}

.tedi-button[data-size="lg"] {
  padding: 1.125em 1.5em;
  font-size: 1em;
  line-height: 1.125;
  font-weight: 500;
}

.tedi-button[data-variant="secondary"],
.secondary-button {
  background-color: var(--t3di__button-secondary-background);
  color: var(--t3di__button-secondary-color);
  border: 1px solid var(--t3di__color-surface-7);
  border-radius: var(--t3di__border-radius-sm);
  border-top-color: color-mix(
    in srgb,
    var(--t3di__color-surface-8) 50%,
    transparent 100%
  );
  border-left-color: color-mix(
    in srgb,
    var(--t3di__color-surface-8) 50%,
    transparent 100%
  );
  border-bottom-color: color-mix(
    in srgb,
    var(--t3di__color-surface-8) 50%,
    transparent 100%
  );
  transition:
    background-color var(--t3di__animation-step) ease,
    border-color calc(var(--t3di__animation-step) * 2) ease,
    box-shadow var(--t3di__animation-step) ease,
    transform var(--t3di__animation-step) ease;
}

.tedi-button[data-variant="secondary"]:hover {
  background-color: color-mix(
    in srgb,
    var(--t3di__button-secondary-background) 80%,
    var(--t3di__color-foreground) 4%
  );
  border-color: var(--t3di__color-surface-10);
}

/* --- Variant: default (primary) — gradient depth effect --- */
.tedi-button[data-variant="default"],
.primary-button {
  background-color: var(--t3di__button-primary-background);
  color: var(--t3di__button-primary-color);
  font-weight: 700;
  border-radius: var(--t3di__border-radius-sm);
  border: 1px solid transparent;
  text-shadow:
    -0.5px -0.5px 1px
      color-mix(
        in srgb,
        var(--t3di__color-background) 20%,
        var(--t3di__color-foreground) 40%
      ),
    0 0 12px
      color-mix(in srgb, var(--t3di__color-secondary-1) 20%, transparent 40%);
  box-shadow:
    0 0 0.5em 0.5px
      color-mix(in srgb, var(--t3di__color-primary-3) 0%, transparent 100%),
    0 0 0 0.5px
      color-mix(
        in srgb,
        var(--t3di__color-background) 10%,
        var(--t3di__color-foreground) 30%
      ),
    inset 0.25px 0.125px 0 0.25px
      color-mix(in srgb, transparent 0%, var(--t3di__color-background) 30%),
    inset -1px -1px 0 0px
      color-mix(
        in srgb,
        var(--t3di__color-background) 10%,
        var(--t3di__color-foreground) 20%
      );
  transition:
    background-color var(--t3di__animation-step) ease,
    border-color calc(var(--t3di__animation-step) * 2) ease,
    box-shadow var(--t3di__animation-step-2x) ease,
    transform var(--t3di__animation-step) ease;
}

.tedi-button[data-variant="default"]:hover,
.primary-button:hover {
  background-color: color-mix(
    in srgb,
    var(--t3di__button-primary-background) 100%,
    var(--t3di__color-background) 11%
  );
  box-shadow:
    0 0 0.5em 0.5px
      color-mix(in srgb, var(--t3di__color-primary-4) 100%, transparent 100%),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--t3di__color-background) 10%,
        var(--t3di__color-foreground) 50%
      ),
    inset 0.25px 0.125px 0 0.25px
      color-mix(in srgb, transparent 0%, var(--t3di__color-background) 30%),
    inset -1px -1px 0 0px
      color-mix(
        in srgb,
        var(--t3di__color-background) 10%,
        var(--t3di__color-foreground) 20%
      );
}

.tedi-button[data-variant="default"]::after,
.primary-button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  background:
    radial-gradient(
      ellipse farthest-corner at right bottom,
      var(--t3di__color-primary-1) 1%,
      color-mix(
          in srgb,
          var(--t3di__color-foreground) 80%,
          var(--t3di__color-secondary-1)
        )
        33%,
      color-mix(
          in srgb,
          var(--t3di__color-foreground) 40%,
          var(--t3di__color-secondary-1)
        )
        20%,
      transparent 20%
    ),
    radial-gradient(
      ellipse farthest-corner at left top,
      var(--t3di__color-foreground) 0%,
      color-mix(
          in srgb,
          var(--t3di__color-foreground) 90%,
          var(--t3di__color-primary-1) 50%
        )
        2%,
      color-mix(
          in srgb,
          var(--t3di__color-primary-1) 20%,
          var(--t3di__color-secondary-1)
        )
        15%,
      color-mix(
          in srgb,
          var(--t3di__color-secondary-1) 20%,
          var(--t3di__color-foreground) 100%
        )
        62.5%,
      color-mix(
          in srgb,
          var(--t3di__color-secondary-1) 40%,
          var(--t3di__color-foreground) 100%
        )
        100%
    );
  opacity: 0.25;
  mix-blend-mode: overlay;
  transition: opacity calc(var(--t3di__animation-step) * 2) ease;
  pointer-events: none;
}

.tedi-button[data-variant="default"] > *,
.primary-button > * {
  position: relative;
  z-index: 2;
}

.tedi-button[data-variant="default"]:active:not(:disabled),
.primary-button:active:not(:disabled) {
  box-shadow:
    inset 1px 1px 1px 0
      color-mix(in srgb, transparent 40%, var(--t3di__color-foreground) 10%),
    inset -0.5px 1px 1px 0
      color-mix(in srgb, transparent 10%, var(--t3di__color-background) 30%),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--t3di__color-background) 10%,
        var(--t3di__color-foreground) 90%
      );
  border-color: var(--t3di__color-primary-3);
  outline: 3px solid var(--t3di__color-primary-3);
}

/* --- Variant: outline --- */
.tedi-button[data-variant="outline"] {
  border-radius: var(--t3di__border-radius-sm);
  background-color: transparent;
  border: 1px solid var(--t3di__border-default);
  color: var(--t3di__text-default);
}

.tedi-button[data-variant="outline"]:hover {
  background-color: var(--t3di__color-primary-3);
  color: #fff;
  border-color: var(--t3di__color-primary-3);
}

/* --- Variant: ghost --- */
.tedi-button[data-variant="ghost"] {
  background-color: transparent;
  color: var(--t3di__text-default);
  border: 1px solid transparent;
}

.tedi-button[data-variant="ghost"]:hover {
  background-color: var(--t3di__color-surface-3);
}

/* --- .tedi-input --- */
.tedi-input {
  display: flex;
  width: 100%;
  height: 3.5em;
  padding: 1.125em;
  line-height: 1.125em;
  border-radius: calc(var(--t3di__border-radius-sm) / 3);
  border: 1px solid var(--t3di__border-default);
  background-color: transparent;
  font-size: 1em;
  font-weight: 400;
  color: var(--t3di__text-default);
  outline: 0;
  box-shadow: 0 0 0 0 transparent;
  transition:
    outline var(--t3di__animation-step) ease-in-out,
    transform var(--t3di__animation-step) ease-in-out,
    box-shadow calc(var(--t3di__animation-step) * 2) ease-in-out,
    border-color var(--t3di__animation-step) ease-in-out,
    border-radius var(--t3di__animation-step-2x) ease-in-out,
    background-color var(--t3di__animation-step) ease-in-out;
}

.tedi-input::placeholder {
  color: var(--t3di__text-placeholder);
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tedi-input:focus {
  border-color: var(--t3di__focus-box-shadow-color);
  outline: 0.25em solid var(--t3di__focus-box-shadow-color);
  outline-offset: 0;
  box-shadow: var(--t3di__focus-box-shadow);
  border-radius: var(--t3di__border-radius-sm);
}

.tedi-input[data-size="sm"] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  height: 2.25rem;
  font-size: 0.875rem;
}

/* --- .tedi-native-select: style a native <select> to match .tedi-select-trigger.
   Radix Select can't run without JS, so Rails pages use the native element and
   hide the OS chevron in favour of a custom SVG chevron from the React design. */
.tedi-native-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: flex;
  width: 100%;
  height: 3.5em;
  padding: 1.125em 3em 1.125em 1.125em;
  line-height: 1.125em;
  align-items: center;
  border-radius: calc(var(--t3di__border-radius-sm) / 3);
  border: 1px solid var(--t3di__border-default);
  background-color: transparent;
  font-size: 1em;
  font-weight: 400;
  color: var(--t3di__text-default);
  outline: 0;
  box-shadow: 0 0 0 0 transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1em center;
  cursor: pointer;
  transition:
    outline var(--t3di__animation-step) ease-in-out,
    box-shadow calc(var(--t3di__animation-step) * 2) ease-in-out,
    border-color var(--t3di__animation-step) ease-in-out,
    border-radius var(--t3di__animation-step-2x) ease-in-out,
    background-color var(--t3di__animation-step) ease-in-out;
}

.tedi-native-select[data-size="sm"] {
  height: 2.25rem;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: normal;
  background-position: right 0.625rem center;
}

.tedi-native-select:focus {
  border-color: var(--t3di__focus-box-shadow-color);
  outline: 0.25em solid var(--t3di__focus-box-shadow-color);
  outline-offset: 0;
  box-shadow: var(--t3di__focus-box-shadow);
  border-radius: var(--t3di__border-radius-sm);
}

.tedi-native-select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Block Badge — .tedi-block-badge (mirrors app/frontend/components/ui/block-badge.css
   so Rails-rendered public pages can use the same visual without loading Vite bundles). */
.tedi-block-badge {
  font-family: var(
    --t3di__font-family-mono,
    "SF Mono",
    Monaco,
    Consolas,
    monospace
  );
  font-size: 0.875em;
  color: hsl(72, 0%, 90%);
  padding: 0.375em 0.6em 0.375em 0.575em;
  display: inline-flex;
  letter-spacing: 0.0675em;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  transform: translateX(-0.25em) translateY(-0.0675em);
  border: 1px solid var(--t3di__layer-2);
  text-shadow:
    0 0 0.125em hsla(72, 90%, 75%, 0.05),
    0 0 0.25em hsla(72, 90%, 75%, 0.14),
    0 0 0.5em hsla(43, 95%, 75%, 0.14),
    1px 0.5px 0.0675em hsla(43, 95%, 75%, 0.14);
  background:
    linear-gradient(
      to bottom,
      transparent 30%,
      hsla(43, 95%, 70%, 0.25) 30% 50%,
      transparent 50% 70%,
      hsla(43, 95%, 70%, 0.25) 70% 90%,
      transparent 90%
    ),
    linear-gradient(
      90deg,
      hsla(43, 95%, 70%, 0.18),
      hsla(43, 95%, 70%, 0.1) 50%,
      hsla(43, 95%, 70%, 0.14)
    ),
    hsl(72, 22%, 11%);
  background-size:
    100% 3px,
    100% 100%,
    100% 100%;
  border-radius: calc(var(--t3di__border-radius-sm) / 2);
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 0.0625em hsl(72, 11%, 32%),
    0 0.25em 0.75em -0.125em hsla(72, 28%, 9%, 0.2);
}

.tedi-block-badge[data-inline="true"] {
  transform: translateY(-0.0675em);
}