/* Palary design tokens — colors, type, radii, spacing, shadows, motion.
 *
 * Taken from the Palary design system (`colors_and_type.css`). Nothing in the
 * portal should hardcode a brand colour; use these custom properties instead.
 *
 * Inter is loaded from Google Fonts, exactly as the design system specifies.
 * The `--font-sans` stack falls back to system fonts if that request is
 * blocked, so the portal stays readable either way.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Core brand */
  --palary-forest: #2e4b47; /* primary — dark teal-green */
  --palary-lime: #cef95d; /* secondary / accent — bright chartreuse */
  --palary-mist: #dbe5e4; /* cool neutral */
  --palary-bone: #f5f4f2; /* warm off-white surface */
  --palary-ink: #0f1918; /* body text / deep contrast */
  --palary-onyx: #181817; /* near-black for logo alt */

  /* Tints & shades */
  --forest-900: #1a2b29;
  --forest-800: #223a37;
  --forest-700: #2e4b47; /* base */
  --forest-600: #3c605b;
  --forest-500: #507771;
  --forest-400: #7a9691;
  --forest-300: #a7bcb8;
  --forest-200: #c8d6d3;
  --forest-100: #dbe5e4; /* = mist */
  --forest-50: #eef3f2;

  --lime-700: #8fba26;
  --lime-600: #a8d43c;
  --lime-500: #cef95d; /* base */
  --lime-400: #dcfa82;
  --lime-300: #e7fba8;
  --lime-200: #f1fcc9;
  --lime-100: #f7fde3;

  --neutral-900: #0f1918;
  --neutral-800: #181817;
  --neutral-700: #2b2b29;
  --neutral-600: #52524f;
  --neutral-500: #7a7a76;
  --neutral-400: #a4a49f;
  --neutral-300: #c9c8c3;
  --neutral-200: #e6e4df;
  --neutral-100: #f0eee9;
  --neutral-50: #f5f4f2; /* = bone */

  /* Semantic */
  --success: #2e4b47;
  --success-tint: #dcfa82;
  --warning: #d89b3b;
  --warning-tint: #f3e0c3;
  --danger: #b84a3e;
  --danger-tint: #f5d6d1;
  --info: #507771;

  /* Surfaces */
  --bg: var(--palary-bone);
  --bg-raised: #ffffff;
  --bg-inset: var(--forest-50);
  --bg-dark: var(--palary-forest);

  /* Foregrounds */
  --fg-1: var(--palary-ink);
  --fg-2: var(--forest-600);
  --fg-3: var(--neutral-500);
  --fg-muted: var(--neutral-400);
  --fg-on-dark: var(--palary-bone);
  --fg-on-lime: var(--palary-forest);

  /* Borders */
  --border: rgba(15, 25, 24, 0.1);
  --border-strong: rgba(15, 25, 24, 0.18);
  --border-dark: rgba(245, 244, 242, 0.14);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Spacing (4pt scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* Shadows — low, soft elevation */
  --shadow-xs: 0 1px 2px rgba(15, 25, 24, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 25, 24, 0.06), 0 1px 2px rgba(15, 25, 24, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 25, 24, 0.08), 0 1px 3px rgba(15, 25, 24, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 25, 24, 0.1), 0 2px 6px rgba(15, 25, 24, 0.05);
  --ring-lime: 0 0 0 3px rgba(206, 249, 93, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* Kept for the legacy rules that still read it. */
  --primary-color: var(--palary-forest);
}