/* GENERATED FILE — DO NOT EDIT BY HAND.
 *
 * Source: @juntos/core src/designTokens.js. Regenerate with:
 *   node scripts/generate-ui-css.js      (in the Juntos_Core repo)
 *
 * Editing this file directly will be silently reverted the next time anyone
 * regenerates. Change the token in Core and regenerate into every app instead —
 * that is the whole point of this file existing (hand-copied brand-tokens.css
 * drifted twice in one week; see Core's CLAUDE.md).
 */

:root {
  /* ── Primitives — the Juntos Branding Guide palette ─────────────────── */
  --navy:                  #061d2d;
  --navy-2:                #0b2638;
  --navy-3:                #122f43;
  --teal:                  #066164;
  --teal-2:                #00797a;
  --teal-3:                #0a8f90;
  --teal-pale:             #e8f4f4;
  --cream:                 #f7f8f6;
  --surface:               #ffffff;
  --line:                  #d9e1e3;
  --slate:                 #4c6f77;
  --muted:                 #61747a;
  --soft:                  #eef3f4;
  --coral:                 #b8665a;
  --coral-light:           #f9eeea;
  --coral-dark:            #9c5347;
  --amber:                 #c4894a;
  --amber-light:           #faf0e4;
  --amber-dark:            #916537;
  --sage:                  #6a9e82;
  --sage-light:            #e9f3ee;
  --sage-dark:             #4a7763;
  --purple:                #7c5aaf;
  --purple-light:          #f1ecfb;

  --r-sm:                  10px;
  --r-md:                  14px;
  --r-lg:                  18px;
  --r-xl:                  26px;

  --shadow-sm:             0 1px 3px rgba(6,29,45,.08), 0 1px 2px rgba(6,29,45,.04);
  --shadow-md:             0 8px 24px rgba(6,29,45,.10), 0 2px 6px rgba(6,29,45,.05);
  --shadow-lg:             0 20px 50px rgba(6,29,45,.16), 0 4px 14px rgba(6,29,45,.06);

  /* ── Semantic roles — what a colour MEANS, not what it looks like ────── */
  /* Status roles are deliberately separate from --accent: an accent carries
     brand identity, a status carries meaning. Never render "needs attention"
     in the brand hue. */
  --bg:                    var(--cream);
  /* --surface is already declared above as a primitive of the same name */
  --surface-raised:        var(--soft);
  --border:                var(--line);
  --text-1:                var(--navy);
  --text-2:                var(--slate);
  --text-3:                var(--muted);
  --accent:                var(--teal-2);
  --accent-dark:           var(--teal-3);
  --accent-light:          var(--teal-pale);
  --status-critical:       var(--coral);
  --status-critical-quiet: var(--coral-light);
  --status-warning:        var(--amber);
  --status-warning-quiet:  var(--amber-light);
  --status-good:           var(--sage);
  --status-good-quiet:     var(--sage-light);
  --status-info:           var(--purple);
  --status-info-quiet:     var(--purple-light);

  /* Legacy colour-named aliases. El Rebaño's pages reference these today, so
     they are kept to make adoption a deletion rather than a rewrite. Prefer the
     semantic name above in anything new. */
  --red:                   var(--status-critical);
  --red-light:             var(--status-critical-quiet);
  --orange:                var(--status-warning);
  --orange-light:          var(--status-warning-quiet);
  --green:                 var(--status-good);
  --green-light:           var(--status-good-quiet);

  /* ── Type scale — floor is 12px, deliberately ────────────────────────── */
  /* An audit found 48 declarations between 9px and 11px in The Huddle alone —
     the app volunteers read on a phone, in a dim auditorium, mid-service. */
  --text-xs:               0.75rem;
  --text-sm:               0.8125rem;
  --text-base:             0.9375rem;
  --text-md:               1.0625rem;
  --text-lg:               1.25rem;
  --text-xl:               1.5rem;
  --text-2xl:              1.875rem;
  --text-3xl:              2.375rem;
  --text-4xl:              3rem;

  /* ── Spacing — 4px ramp ──────────────────────────────────────────────── */
  --space-0:               0;
  --space-1:               4px;
  --space-2:               8px;
  --space-3:               12px;
  --space-4:               16px;
  --space-5:               20px;
  --space-6:               24px;
  --space-8:               32px;
  --space-10:              40px;
  --space-12:              48px;
  --space-16:              64px;
}

/* ── Breakpoints ───────────────────────────────────────────────────────────
 * Emitted as documentation, NOT as custom properties: a CSS variable cannot be
 * used in a media query condition. Write these literals in @media rules.
 * Values match Tailwind's defaults so El Nido converges without churn.
 *
 *   sm  @media (min-width: 640px)
 *   md  @media (min-width: 768px)
 *   lg  @media (min-width: 1024px)
 *   xl  @media (min-width: 1280px)
 *
 * MOBILE-FIRST. Every existing rule in these apps caps at max-width 380-600px,
 * below `sm` — so those become the unqualified base and nothing re-renders until
 * a min-width rule is added. There is currently NO breakpoint above 600px
 * anywhere on this platform, which is why tablet and desktop feel unfinished.
 */

/* Keyboard focus ring. `!important` is load-bearing, not lazy: a platform-wide
   sweep found 42 `outline: none` declarations, every one of which outranks a bare
   :focus-visible on specificity, so this ring was silently absent everywhere.
   There is no legitimate case for suppressing a keyboard focus indicator
   (WCAG 2.4.7). Per-element :focus border/background changes still apply under it. */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}