@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 72 4% 98.75%;
    --foreground: 17 28% 2%;
    --muted: 35 21% 89%;
    --muted-foreground: 33 8% 49%;
    --popover: 33 12% 97%;
    --popover-foreground: 28 37% 18%;
    --border: 35 21% 89%;
    --input: 35 19% 84%;
    --card: 23 32% 98%;
    --card-foreground: 24 66% 27%;
    --primary: 27 91% 51%;
    --primary-foreground: 0 0% 100%;
    --secondary: 23 93% 85%;
    --secondary-foreground: 39 16% 15%;
    --accent: 36 42% 90%;
    --accent-foreground: 203 66% 50%;
    --destructive: 15 90% 50%;
    --destructive-foreground: 210 40% 98%;
    --warning: 45 93% 47%;
    --warning-foreground: 30 80% 15%;
    --ring: 15 90% 50%;
    --radius: 0.5rem;

    --space: 1.5rem;

    --affirmative: 104 49% 50%;

    /* Direction semantics: inbound (data we receive) reads blue, outbound
       (data we send) reads green. Dedicated tokens so the meaning is stable
       across light and dark, so outbound no longer borrows the orange primary
       used for links/buttons, and so the two directions stay far apart on the
       color wheel. */
    --inbound: 202 80% 42%;
    --outbound: 130 40% 40%;

    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);

    /* Tedi extended tokens */
    --tedi-duration-fast: 120ms;
    --tedi-duration-normal: 200ms;
    --tedi-duration-slow: 350ms;
    --tedi-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --tedi-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --tedi-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --tedi-focus-ring-width: 2px;
    --tedi-focus-ring-offset: 2px;
    --tedi-focus-ring-color: hsl(var(--ring));
    --tedi-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tedi-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tedi-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;
    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;
    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;
    --border: 216 34% 17%;
    --input: 216 34% 17%;
    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;
    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
    --ring: 216 34% 17%;

    /* Lightened for legibility on the dark background. Inbound stays blue,
       outbound stays green. */
    --inbound: 202 85% 66%;
    --outbound: 130 45% 58%;

    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

@layer components {
  .form-input {
    @apply block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full;
  }

  .form-select {
    @apply block shadow rounded-md border border-gray-400 px-3 py-2 mt-2 w-full h-10;
  }

  .form-submit {
    @apply rounded-lg py-3 px-5 bg-primary text-white inline-block font-medium cursor-pointer;
  }

  .error-box {
    @apply bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3;
  }

  .notice-success {
    @apply py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block;
  }

  .link {
    @apply text-primary hover:underline;
  }

  /* Magazine-style pull quote for narrative docs and updates. Authored in
     markdown as a > [!PULLQUOTE] blockquote and emitted by
     NarrativeDocs::MarkdownRenderer. Colors use the design-system tokens so the
     panel and glyph adapt to dark mode; geometry matches the approved design. */
  .pull-quote {
    position: relative;
    margin: 2.75rem 0;
    padding: 2rem 2.5rem 2rem 2.75rem;
    background: hsl(var(--accent) / 0.45);
    border-radius: 14px;
    overflow: hidden;
  }

  .pull-quote__mark {
    position: absolute;
    left: 22px;
    top: 22px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 88px;
    font-weight: 700;
    line-height: 1;
    color: hsl(var(--primary) / 0.55);
    user-select: none;
    pointer-events: none;
  }

  .pull-quote__body {
    position: relative;
    margin: 0;
    padding-left: 58px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.38;
    letter-spacing: -0.008em;
    color: hsl(24 36% 22%);
    text-wrap: pretty;
  }

  .pull-quote__body p {
    margin: 0;
  }

  .pull-quote__body p + p {
    margin-top: 1rem;
  }

  .dark .pull-quote__body {
    color: hsl(var(--foreground));
  }
}

@layer components {
  .resources-nav-container {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 6rem;
      background: linear-gradient(to right, transparent, hsl(var(--background)));
      pointer-events: none;
      z-index: 10;

      @media (min-width: 768px) {
        display: none;
      }
    }
  }

  .resources-nav {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
    gap: 1rem;
    padding-right: 6rem;
    overflow-x: auto;

    @media (min-width: 480px) {
      gap: 1.75rem;
    }

    @media (min-width: 768px) {
      padding-right: 0;
    }
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}