/* VENDORED from @renkara/design-system@0.2.2 (dist/tokens.css) by scripts/vendor_design_system.py.
   Do not edit by hand: change vendor.json and re-run the script. */
/**
 * @renkara/design-system — design tokens
 *
 * Consumer usage:
 *   @import "@renkara/design-system/tokens.css";
 *
 * Per-tool brand identity: set `--brand-accent` in your root CSS.
 * `--accent` aliases to `--brand-accent`, so every component in the
 * library picks up the tool's colour without any further wiring.
 *
 * ------------------------------------------------------------------
 * Provenance
 * ------------------------------------------------------------------
 * The visual language here is Aerie's, extracted from
 * `renkara-tools/aerie/frontend/src` (global.css + App.tsx + the
 * Launcher/Websites pages). Aerie is the fleet's reference tool: the
 * neutral ramp, the lift-on-hover card treatment, the overshoot easing
 * and the uppercase section headings all come from it verbatim.
 *
 * This package is deliberately INDEPENDENT of @avian/design-system,
 * which serves accelastudy.ai and evolves on that product's schedule.
 * The neutral ramp and the WCAG-verified warning/success values were
 * carried across because they were already correct and audited; every
 * accent, radius, shadow and motion value below is Aerie's.
 */

@layer base {
  :root {
    /* ----------------------------------------------------------------
     * Brand accent — the one token a tool is expected to override.
     * Default is Aerie azure (#0B79D0), verified 4.6:1 on --card.
     * ---------------------------------------------------------------- */
    --brand-accent: 212 90% 48%;

    /* ---- Neutral ramp (light) ------------------------------------- */
    --background: 210 33% 98%;
    --foreground: 217 48% 20%;
    --card: 0 0% 100%;
    --card-foreground: 217 48% 20%;
    --popover: 0 0% 100%;
    --popover-foreground: 217 48% 20%;
    --muted: 210 20% 95%;
    --muted-foreground: 216 14% 40%;
    --primary: 217 48% 20%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 20% 95%;
    --secondary-foreground: 217 48% 20%;

    /* Accent aliases to brand-accent so per-tool colour cascades. */
    --accent: var(--brand-accent);
    --accent-foreground: 0 0% 100%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: var(--brand-accent);

    /* ---- Status ---------------------------------------------------- */
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --success: 160 84% 22%;
    --warning: 37 92% 30%;
    --info: var(--accent);

    /* ----------------------------------------------------------------
     * Health palette — Aerie's fleet-status dots. Kept as first-class
     * tokens because half the fleet renders a status indicator of some
     * kind (vigil, aerie, foundry, chronicle) and they were each
     * picking their own greens and ambers.
     * ---------------------------------------------------------------- */
    --health-healthy: 142 71% 45%;
    --health-degraded: 38 92% 50%;
    --health-down: 0 84% 60%;
    --health-unknown: 216 14% 40%;

    /* ----------------------------------------------------------------
     * Radii — Aerie's scale. Controls are `md`; cards and panels are
     * `card` (rounded-xl, 12px); icon chips and overlays are `chip`
     * (rounded-2xl, 16px). Aerie never uses a radius outside this set.
     * ---------------------------------------------------------------- */
    --radius: 0.5rem;
    --radius-card: 0.75rem;
    --radius-chip: 1rem;

    /* ----------------------------------------------------------------
     * Elevation — Aerie is a low-shadow design. Surfaces are separated
     * by border first, shadow second; the only pronounced shadow in the
     * whole app is the command palette.
     * ---------------------------------------------------------------- */
    --shadow-none: none;
    --shadow-card: 0 1px 2px 0 hsl(217 48% 20% / 0.04);
    --shadow-raised: 0 4px 12px -2px hsl(217 48% 20% / 0.10);
    --shadow-popover: 0 8px 24px -4px hsl(217 48% 20% / 0.14);
    --shadow-modal: 0 24px 48px -12px hsl(217 48% 20% / 0.24);

    /* ---- Typography ------------------------------------------------ */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Fira Code', ui-monospace, monospace;

    /* ----------------------------------------------------------------
     * Motion — `--ease-lift` is Aerie's signature. The 1.2 control
     * point overshoots slightly, which is what gives tiles their
     * "settle into place" feel on entrance and hover. Use it for
     * anything that scales or translates; use --ease-out for fades.
     * ---------------------------------------------------------------- */
    --ease-lift: cubic-bezier(0.34, 1.2, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 0.9, 0.32, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-instant: 120ms;
    --duration-fast: 160ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* ----------------------------------------------------------------
     * Layout constants. Content heights exclude device safe areas;
     * full heights include them, so sticky offsets and page padding
     * cannot be overlapped by chrome on notched devices.
     * ---------------------------------------------------------------- */
    --safe-area-inset-top: max(env(safe-area-inset-top, 0px), 0px);
    --safe-area-inset-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
    --top-nav-content-height: 3.5rem;
    --top-nav-height: calc(var(--top-nav-content-height) + var(--safe-area-inset-top));
    --content-max-width: 80rem;

    /* ----------------------------------------------------------------
     * Grid rhythm — the two Aerie grids, as tokens so every tool's
     * tile/card wall lines up with every other tool's.
     * ---------------------------------------------------------------- */
    --grid-tile-min: 200px;
    --grid-tile-gap: 1rem;
    --grid-card-min: 280px;
    --grid-card-gap: 1.25rem;

    color-scheme: light;
  }

  .dark,
  [data-theme='dark'] {
    /* Lifted for WCAG AA on the dark card background. Tools that set a
     * custom --brand-accent are expected to lift it here too. */
    --brand-accent: 212 95% 66%;

    --background: 220 20% 8%;
    --foreground: 210 33% 95%;
    --card: 220 18% 12%;
    --card-foreground: 210 33% 95%;
    --popover: 220 18% 12%;
    --popover-foreground: 210 33% 95%;
    --muted: 220 16% 16%;
    --muted-foreground: 216 14% 65%;
    --primary: 210 33% 95%;
    --primary-foreground: 220 20% 8%;
    --secondary: 220 16% 16%;
    --secondary-foreground: 210 33% 95%;

    --accent: var(--brand-accent);
    --accent-foreground: 220 30% 10%;

    --border: 220 16% 20%;
    --input: 220 16% 20%;
    --ring: var(--brand-accent);

    --destructive: 0 72% 50%;
    --destructive-foreground: 0 0% 98%;
    --success: 160 84% 39%;
    --warning: 37 92% 54%;
    --info: var(--accent);

    --health-healthy: 142 69% 58%;
    --health-degraded: 38 92% 60%;
    --health-down: 0 84% 68%;
    --health-unknown: 216 14% 65%;

    --shadow-card: 0 1px 2px 0 hsl(0 0% 0% / 0.32);
    --shadow-raised: 0 4px 12px -2px hsl(0 0% 0% / 0.44);
    --shadow-popover: 0 8px 24px -4px hsl(0 0% 0% / 0.52);
    --shadow-modal: 0 24px 48px -12px hsl(0 0% 0% / 0.64);

    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ */
/*  Base element defaults                                              */
/* ------------------------------------------------------------------ */
@layer base {
  html,
  body,
  #root {
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }

  body {
    font-family: var(--font-sans);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  a {
    color: hsl(var(--accent));
    text-decoration: none;
  }
  a:hover {
    color: hsl(var(--accent) / 0.85);
  }

  /* Aerie never shows a default focus ring — every interactive surface
   * in this library draws its own `focus-visible` accent ring instead. */
  :focus-visible {
    outline: none;
  }
}

/* ------------------------------------------------------------------ */
/*  Grid utilities — the two Aerie walls                               */
/*                                                                     */
/*  Exposed as plain classes rather than Tailwind utilities because     */
/*  they use `auto-fill` + `minmax()` against a token, which Tailwind's  */
/*  arbitrary-value syntax makes unreadable at every call site.         */
/* ------------------------------------------------------------------ */
@layer components {
  .rk-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-tile-min), 1fr));
    gap: var(--grid-tile-gap);
  }

  .rk-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-card-min), 1fr));
    gap: var(--grid-card-gap);
  }

  /* Below the smallest supported viewport (375px) an auto-fill track
   * whose minimum is 280px overflows horizontally. Collapse to one
   * column rather than letting the page scroll sideways. */
  @media (max-width: 375px) {
    .rk-tile-grid,
    .rk-card-grid {
      grid-template-columns: 1fr;
    }
  }
}

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