/* elements.dev theme layer.
   Imported (before @elements/style) by page.css and email.css. Written
   unlayered so it wins over the package's @layer tokens regardless of
   order. */

/* ─── Brand accent ──────────────────────────────────────────────────
   The exact logo blues. The shipped theme (themes/elements) generates
   its ramp in OKLCH at hue 235 and points --accent at the 600 step —
   which renders as a cyan (#0085BC) that clashes with the #49A9E7
   favicon/mark (hue ~240). Pin the accent family to the brand hexes so
   the favicon, the mark, buttons, and accent text are one color.

     --accent       fills: primary buttons, the mark, selection chrome
     --accent-deep  hover / pressed / accent-colored text and links
     --accent-soft  tinted accent backgrounds (callouts, focus wash)
     --accent-edge  accent borders on tinted surfaces */
:root {
  --accent:      #49A9E7;
  --accent-deep: #297EC2;
  --accent-soft: #EBF6FC;
  --accent-ink:  #ffffff;
  --accent-edge: rgba(41, 126, 194, 0.30);
}

/* Dark-mode accent family. These MUST live here too: the block above is
   unlayered (so it beats the package's @layer tokens), which means the
   shipped dark overrides in themes/elements.css — being layered — can
   never win. Without this block --accent-soft stays #EBF6FC (near-white)
   in dark mode, so accent-tinted surfaces (e.g. the selected palette row)
   render as a white bar that hides its text. Values mirror the package's
   dark theme via the brand ramp; two-block pattern like the package
   (media query for "system", attribute for a pinned "dark"). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:      var(--elements-blue-500);
    --accent-deep: var(--elements-blue-400);
    --accent-soft: var(--elements-blue-950);
    --accent-ink:  #ffffff;
    --accent-edge: var(--elements-blue-800);
  }
}
:root[data-theme="dark"] {
  --accent:      var(--elements-blue-500);
  --accent-deep: var(--elements-blue-400);
  --accent-soft: var(--elements-blue-950);
  --accent-ink:  #ffffff;
  --accent-edge: var(--elements-blue-800);
}

/* Fonts — Inter for everything, JetBrains Mono for code. Stacks are
   @font-face'd in ./fonts.css; here we just point the semantic tokens
   at them.

   Type rule:
     --font-sans → Inter → titles, body, chrome, buttons, labels
     --font-mono → JetBrains Mono → fenced code, inline code, terminal, kbd */
:root {
  --font-sans:
    "Inter",
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono:
    "JetBrains Mono",
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Tighter "surgical" radius scale — a notch tighter than the
     defaults in @elements/style. The defaults read a touch too
     rounded for our chrome; pulling each token down keeps the
     geometry present but less pillowy. */
  --radius-xs:  2px;
  --radius-sm:  3px;
  --radius-md:  4px;
  --radius-lg:  5px;
  --radius-xl:  7px;
  --radius-2xl: 9px;

  /* App-specific container for form-shaped pages (purchase, account
     settings). Narrower than the marketing width so multi-section
     forms read as a single column without inputs that stretch to the
     limits of marketing-page width. /signin and /signup keep their
     own narrow shell (~480px) — those are short forms. */
  --container-form: 40rem;   /* 640px */

  /* Tighten default `<button>` height app-wide. The package default
     is 40px; we run 36px (matches the package's `.is-sm`); explicit
     `.is-lg` / `.is-hero` consumers still scale up. Font-size shrinks
     a tick for proportion. */
  --button-height:    2.25rem;
  --button-font-size: 0.8125rem;

  /* ─── Kind chip palette ─────────────────────────────────────────
     Single source of truth for the chip color of every content
     kind. Mirrors `KindColor` in app/lib/enums.ts — change a hex
     here AND there together. Surfaces that render kind chips (feed
     row, palette, post byline, search results, profile rows, the
     feed-digest email's inline styles) all read these values.

     Tone: soft / pastel — lower saturation than Tailwind 600. Hue
     separation per kind is the dominant signal; the chips
     themselves don't shout.

     Light-only hexes; stays here until dark mode (deferred)
     tokenizes it.

     Locked rules (don't reshuffle without asking):
       - never red / green / brown for content kinds (status-coded)
       - hue per kind never collapses with another kind */

  /* Post kinds — pigment-named editorial palette. Mirror of
     KindColor in app/lib/enums.ts. */
  --kind-discuss:   #7BA89B;   /* eucalyptus      */
  --kind-show:      #D58475;   /* coral           */
  --kind-ask:       #7995B6;   /* denim           */
  --kind-announce:  #DBB05A;   /* goldenrod       */
  /* Other content kinds (parallel set on the chip axis) */
  --kind-course:    #D77F9E;   /* rose            */
  --kind-lesson:    #A07A96;   /* plum            */
  --kind-guide:     #A899C5;   /* lilac           */
  --kind-video:     #DD9474;   /* peach           */
  /* Neutrals — content kinds that don't carry a strong semantic
     hue (comment / user are about the actor, not the content
     type; page is structural). */
  --kind-comment:   #94a3b8;   /* slate           */
  --kind-user:      #94a3b8;   /* slate           */
  --kind-page:      #9ca3af;   /* gray            */
  /* Defensive fallback — the generic "post" chip should not
     normally render (post hits surface their actual postKind), but
     keep a value on hand for any caller that emits "post". */
  --kind-post:      var(--kind-discuss);

  /* Issue tracker kinds — bug + feature carry the status signal
     directly (red FOR bug is the entire point; navy reads as
     steady-progress for feature). The red/green/brown lockout that
     applies to every other content kind doesn't apply here.
     Mirror in app/lib/enums.ts (KindColor) when adjusting. */
  --kind-bug:       #9b1c1c;   /* deep red        */
  --kind-feature:   #1e4d8c;   /* navy            */
}