@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%;
    /* Three-step orange ramp. --primary above is the brand orange and is
       decorative only: fills, bars, rings, rails, never text, because #f47710
       is 2.73:1 on the page background. The two below are the steps that carry
       contrast: --primary-ui for what WCAG holds to 3:1 (icons, large bold
       stats, state indicators), --link for body-size orange text at 4.5:1.
       Verified against this codebase's own --background: --primary-ui 3.33:1,
       --link 4.69:1. --link is applied by redefining .link and the
       .text-primary utility below rather than by editing 132 call sites. */
    --primary-ui: 27 95% 45%;
    --link: 25 95% 38%;
    --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. */
    /* The ramp collapses on the dark ground, where the near-white primary
       already clears both bars. */
    --primary-ui: 210 40% 98%;
    --link: 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(--link));
    @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; --link is 4.69:1. --primary is untouched, so bg-primary,
     border-primary and ring-primary keep the brand orange. */
  .text-primary {
    color: hsl(var(--link));
  }
}