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

@layer base {
  :root {
    --background: 72 4% 98.75%;
    --foreground: 17 28% 2%;
    --muted: 35 21% 89%;
    /* 42%, not the 49% it was, so secondary text clears 4.5:1 on the page
       background, the card and the muted panel. 43% lands on 4.48 against the
       card, which is a fail. */
    --muted-foreground: 33 8% 42%;
    --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%;
    /* The brand orange is legible as a fill but not as text: #f47710 is 2.73:1
       on the page background. --primary stays put so buttons, borders, rings
       and icons are unchanged; text and links use this darker companion, which
       clears 4.5:1. Applied by redefining the .text-primary utility below
       rather than by editing 132 call sites. */
    --primary-text: 27 91% 36%;
    --secondary: 23 93% 85%;
    --secondary-foreground: 39 16% 15%;
    --accent: 36 42% 90%;
    --accent-foreground: 203 66% 50%;
    /* 43%: every "Delete" control renders this as text, where 50% was 3.56:1.
       44% clears white but lands on 4.45 against the warm-tinted surfaces. */
    --destructive: 15 90% 43%;
    --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% 35%;
    --outbound: 130 40% 33%;

    --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%;
    /* On the dark ground the primary is already near-white, so text and fill
       can share it. */
    --primary-text: 210 40% 98%;
    --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 {
    color: hsl(var(--primary-text));
    @apply hover:underline;
  }


  /* WCAG 1.4.1: a link sitting inside a run of text cannot be distinguished by
     colour alone. Against secondary text the link colour is around 1.1:1, well
     under the 3:1 that would let colour carry it, so links in prose are
     underlined at rest. Nav items, buttons and standalone calls to action are
     not in a text block and keep the undecorated treatment. */
  p .link,
  li .link,
  p a.text-primary,
  li a.text-primary,
  /* Links inside a run of secondary text. This is the worst case: against
     --muted-foreground the accent is about 1.04:1, so colour carries nothing
     at all. Matching on the container, not the link, so a link that is itself
     muted is untouched. */
  .text-muted-foreground .link,
  .text-muted-foreground a.text-primary {
    @apply underline underline-offset-2;
  }

  /* 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;
  }
}

/* ---------------------------------------------------------------------------
   Contrast overrides (WCAG 2.0 AA, 1.4.3)

   In the utilities layer so they land after the generated utilities they
   redefine. Both rules exist so the brand orange can stay bright where it is a
   shape and go dark where it is text, without editing 132 call sites.
   --------------------------------------------------------------------------- */
@layer utilities {
  /* Text and icons that take the accent colour. #f47710 is 2.73:1 on the page
     background; --primary-text is 5.04:1. --primary is untouched, so
     bg-primary, border-primary and ring-primary keep the brand orange. */
  .text-primary {
    color: hsl(var(--primary-text));
  }
}