/*
 * Collie design tokens + base components — distilled from the Collie app theme
 * (Collie-App/lib/src/app.dart + theme/). Served by the hub at /shared/collie.css;
 * every tool links it with <link rel="stylesheet" href="/shared/collie.css"> so the
 * whole hub stays on-brand from one source. Framework-agnostic: use the CSS
 * variables directly, the .collie-* base classes, or feed the variables into
 * Tailwind/styled-* etc.
 *
 * The look: navy chrome + white content surfaces + a lime accent, Montserrat
 * type, generous corner radii, flat (near-zero elevation).
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --collie-navy: #162435;          /* brand core: app background, nav, primary buttons, body text */
  --collie-lime: #e4f97a;          /* brand accent: highlights, selected, call-to-action emphasis */
  --collie-lime-muted: #cedc83;    /* soft accent (app uses it at 50% alpha for fills/overlays) */

  /* ---- Surfaces / neutrals ------------------------------------------- */
  --collie-surface: #ffffff;       /* content surface: cards, sheets, drill-down pages */
  --collie-surface-2: #f2f2f2;     /* subtle tint for controls sitting on white */
  --collie-surface-3: #e0e0e0;     /* sheets, app bars (grey.300) */
  --collie-surface-muted: #eeeeee; /* dialogs (grey.200) */
  --collie-ink: #162435;           /* primary text (= navy) */
  --collie-ink-muted: #969696;     /* secondary text / icons (onSurface) */
  --collie-on-navy: #ffffff;       /* text/icons on navy */
  --collie-on-lime: #162435;       /* text/icons on lime (lime is light → navy text) */
  --collie-border: rgba(158, 158, 158, 0.1); /* hairline outline */
  --collie-divider: #162435;       /* dividers are navy and chunky (3px) in-app */

  /* ---- Semantic ------------------------------------------------------- */
  --collie-danger: #ee4040;        /* error */
  --collie-danger-soft: #ff5c5c;   /* error container / lighter destructive */
  /* NOTE: the app has no dedicated success/warning palette. Prefer navy/lime
     for normal emphasis and --collie-danger for errors; only borrow generic
     green/amber if a status genuinely needs them. */

  /* ---- Typography ----------------------------------------------------- */
  --collie-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --collie-weight-regular: 400;
  --collie-weight-medium: 500;
  --collie-weight-semibold: 600;
  --collie-weight-bold: 700;

  --collie-text-display: 1.75rem;  /* 28px — page hero (extrapolated) */
  --collie-text-h1: 1.375rem;      /* 22px (extrapolated) */
  --collie-text-h2: 1.125rem;      /* 18px — matches dialog title */
  --collie-text-title: 1rem;       /* 16px / 600 — titleMedium */
  --collie-text-subtitle: 0.875rem;/* 14px / 600 — titleSmall */
  --collie-text-body: 0.875rem;    /* 14px / 400 */
  --collie-text-caption: 0.75rem;  /* 12px / 400 — dialog content */

  /* ---- Spacing (4 / 8 / 16 / 24 / 32) -------------------------------- */
  --collie-space-xs: 4px;
  --collie-space-sm: 8px;
  --collie-space-md: 16px;   /* default */
  --collie-space-lg: 24px;
  --collie-space-xl: 32px;

  /* ---- Radius --------------------------------------------------------- */
  --collie-radius-sm: 4px;
  --collie-radius: 8px;      /* default — buttons, cards, dialogs */
  --collie-radius-lg: 12px;
  --collie-radius-xl: 20px;  /* modal sheets */
  --collie-radius-sheet: 32px; /* bottom-sheet top corners */

  /* ---- Elevation (app is flat; subtle shadow is a web adaptation) ----- */
  --collie-shadow-card: 0 1px 3px rgba(22, 36, 53, 0.08);
  --collie-shadow-pop: 0 6px 20px rgba(22, 36, 53, 0.16);

  /* ---- Motion --------------------------------------------------------- */
  --collie-motion-fast: 150ms;
  --collie-motion: 300ms;
  --collie-motion-slow: 500ms;
}

/* ---- Base ------------------------------------------------------------- */
body.collie,
.collie-app {
  background: var(--collie-navy);
  color: var(--collie-on-navy);
  font-family: var(--collie-font);
  font-size: var(--collie-text-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.collie-app h1 { font-size: var(--collie-text-h1); font-weight: var(--collie-weight-bold); }
.collie-app h2 { font-size: var(--collie-text-h2); font-weight: var(--collie-weight-semibold); }
.collie-app h3 { font-size: var(--collie-text-title); font-weight: var(--collie-weight-semibold); }
.collie-muted { color: var(--collie-ink-muted); }

/* ---- Card / content surface (sits on the navy background) ------------- */
.collie-card {
  background: var(--collie-surface);
  color: var(--collie-ink);
  border-radius: var(--collie-radius-lg);
  padding: var(--collie-space-md);
  box-shadow: var(--collie-shadow-card);
}

/* ---- Buttons --------------------------------------------------------- */
.collie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--collie-space-sm);
  min-height: 48px;
  padding: 0 var(--collie-space-md);
  border: 0;
  border-radius: var(--collie-radius);
  font-family: var(--collie-font);
  font-size: var(--collie-text-body);
  font-weight: var(--collie-weight-semibold);
  cursor: pointer;
  transition: filter var(--collie-motion-fast) ease, background var(--collie-motion-fast) ease;
  /* primary: navy fill, white label */
  background: var(--collie-navy);
  color: var(--collie-on-navy);
}
.collie-btn:hover { filter: brightness(1.15); }
.collie-btn:disabled { opacity: 0.5; cursor: default; filter: none; }

/* secondary: white fill, navy label (the app's "admin" button) */
.collie-btn--secondary {
  background: var(--collie-surface);
  color: var(--collie-navy);
}
/* accent: lime fill, navy label — for the one primary call-to-action */
.collie-btn--accent {
  background: var(--collie-lime);
  color: var(--collie-on-lime);
}
/* danger: destructive actions */
.collie-btn--danger {
  background: var(--collie-danger);
  color: #fff;
  font-weight: var(--collie-weight-bold);
}

/* ---- Segmented / filter toggle (selected = navy, else white) --------- */
.collie-toggle {
  min-height: 48px;
  padding: var(--collie-space-xs) var(--collie-space-md);
  border-radius: var(--collie-radius);
  background: var(--collie-surface);
  color: var(--collie-navy);
  font-weight: var(--collie-weight-semibold);
  border: 0;
  cursor: pointer;
}
.collie-toggle[aria-pressed='true'],
.collie-toggle.is-selected {
  background: var(--collie-navy);
  color: var(--collie-on-navy);
}

/* ---- Inputs ---------------------------------------------------------- */
.collie-input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--collie-space-md);
  background: var(--collie-surface);
  color: var(--collie-ink);
  border: 1px solid var(--collie-border);
  border-radius: var(--collie-radius);
  font-family: var(--collie-font);
  font-size: var(--collie-text-body);
}
.collie-input::placeholder { color: var(--collie-ink-muted); }
.collie-input:focus {
  outline: none;
  border-color: var(--collie-navy);
}

/* ---- Divider --------------------------------------------------------- */
.collie-divider {
  border: 0;
  height: 3px;
  background: var(--collie-divider);
}