/*
 * Pet Store Solutions design tokens.
 * Source of truth for colors, type, spacing, radii, shadows, and motion.
 * Import this file directly in any demo UI. Usage rules live in design-system.md.
 * Scale steps marked "logo" are sampled from assets/logo.jpeg.
 */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  /* ---------- Palette ---------- */

  /* Leash Navy: wordmark, logo ring, primary actions */
  --pss-navy-50: #f3f6fb;
  --pss-navy-100: #e3eaf4;
  --pss-navy-200: #c6d3e8;
  --pss-navy-300: #9db2d4;
  --pss-navy-400: #6f8cbb;
  --pss-navy-500: #4b6b9f;
  --pss-navy-600: #3c5d8f;
  --pss-navy-700: #304e7f; /* logo */
  --pss-navy-800: #263b6b; /* logo */
  --pss-navy-900: #1e2a4f;

  /* Sunset Orange: the dog's coat, commerce CTAs */
  --pss-orange-50: #fef6f0;
  --pss-orange-100: #fde9da;
  --pss-orange-200: #fbd2b4;
  --pss-orange-300: #f8b183;
  --pss-orange-400: #f3863c; /* logo */
  --pss-orange-500: #e1712a;
  --pss-orange-600: #c2571a;
  --pss-orange-700: #9f460a;
  --pss-orange-800: #783507;
  --pss-orange-900: #522405;

  /* Golden Retriever: the dog's face, Autoship, ratings, warnings */
  --pss-golden-50: #fffaf0;
  --pss-golden-100: #fff1d9;
  --pss-golden-200: #ffe2b3;
  --pss-golden-300: #fec56a; /* logo */
  --pss-golden-400: #fcae4f; /* logo */
  --pss-golden-500: #f09a1f;
  --pss-golden-600: #d58301;
  --pss-golden-700: #a76701;
  --pss-golden-800: #7f4e01;
  --pss-golden-900: #563501;

  /* Happy Coral: the tongue, sale and promo accents only */
  --pss-coral-50: #fff3f1;
  --pss-coral-100: #ffe2de;
  --pss-coral-200: #ffc2ba;
  --pss-coral-300: #ff9081; /* logo */
  --pss-coral-500: #e8604f;
  --pss-coral-700: #b23a2c;

  /* Paw Lavender: paw background and the cat, secondary surfaces */
  --pss-lavender-50: #f6f5fc;
  --pss-lavender-100: #ebe9f7;
  --pss-lavender-200: #cecbeb; /* logo */
  --pss-lavender-300: #b3aee0;
  --pss-lavender-400: #8f88cc;
  --pss-lavender-500: #6c63b5;
  --pss-lavender-700: #463e8a;

  /* Neutrals: navy-tinted grays */
  --pss-neutral-0: #ffffff;
  --pss-neutral-50: #f7f8fa;
  --pss-neutral-100: #eceef2;
  --pss-neutral-200: #d8dce3;
  --pss-neutral-300: #bcc2cd;
  --pss-neutral-400: #9aa2b1;
  --pss-neutral-500: #767f93;
  --pss-neutral-600: #5e6678;
  --pss-neutral-700: #4a505e;
  --pss-neutral-800: #333845;
  --pss-neutral-900: #1f2330;

  /* Status */
  --pss-green-50: #effaf4;
  --pss-green-500: #31a570;
  --pss-green-700: #237a52;
  --pss-red-50: #fdf1f1;
  --pss-red-500: #d33636;
  --pss-red-700: #a32424;

  /* ---------- Semantic colors ---------- */

  --pss-color-bg: var(--pss-neutral-0);
  --pss-color-bg-subtle: var(--pss-neutral-50);
  --pss-color-surface: var(--pss-neutral-0);
  --pss-color-surface-alt: var(--pss-lavender-50);
  --pss-color-border: var(--pss-neutral-200);
  --pss-color-border-strong: var(--pss-neutral-300);

  --pss-color-text: var(--pss-navy-900);
  --pss-color-text-muted: var(--pss-neutral-600);
  --pss-color-text-inverse: var(--pss-neutral-0);
  --pss-color-link: var(--pss-navy-700);
  --pss-color-link-hover: var(--pss-orange-700);

  --pss-color-primary: var(--pss-navy-700);
  --pss-color-primary-hover: var(--pss-navy-800);
  --pss-color-on-primary: var(--pss-neutral-0);

  --pss-color-cta: var(--pss-orange-400);
  --pss-color-cta-hover: var(--pss-orange-300);
  --pss-color-on-cta: var(--pss-navy-900);

  --pss-color-autoship: var(--pss-golden-300);
  --pss-color-on-autoship: var(--pss-navy-900);
  --pss-color-sale: var(--pss-coral-300);
  --pss-color-on-sale: var(--pss-navy-900);

  --pss-color-focus: var(--pss-orange-400);

  --pss-color-success: var(--pss-green-700);
  --pss-color-success-bg: var(--pss-green-50);
  --pss-color-warning: var(--pss-golden-800);
  --pss-color-warning-bg: var(--pss-golden-50);
  --pss-color-danger: var(--pss-red-700);
  --pss-color-danger-bg: var(--pss-red-50);
  --pss-color-info: var(--pss-navy-700);
  --pss-color-info-bg: var(--pss-navy-50);

  /* ---------- Typography ---------- */

  --pss-font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --pss-font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --pss-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --pss-text-xs: 0.75rem; /* 12px */
  --pss-text-sm: 0.875rem; /* 14px */
  --pss-text-base: 1rem; /* 16px */
  --pss-text-lg: 1.125rem; /* 18px */
  --pss-text-xl: 1.25rem; /* 20px */
  --pss-text-2xl: 1.5rem; /* 24px */
  --pss-text-3xl: 2rem; /* 32px */
  --pss-text-4xl: 2.5rem; /* 40px */
  --pss-text-5xl: 3.25rem; /* 52px */

  --pss-leading-tight: 1.15;
  --pss-leading-snug: 1.3;
  --pss-leading-normal: 1.55;

  --pss-weight-regular: 400;
  --pss-weight-medium: 500;
  --pss-weight-semibold: 600;
  --pss-weight-bold: 700;
  --pss-weight-extrabold: 800;

  /* ---------- Spacing (4px base) ---------- */

  --pss-space-1: 0.25rem; /* 4px */
  --pss-space-2: 0.5rem; /* 8px */
  --pss-space-3: 0.75rem; /* 12px */
  --pss-space-4: 1rem; /* 16px */
  --pss-space-5: 1.5rem; /* 24px */
  --pss-space-6: 2rem; /* 32px */
  --pss-space-7: 3rem; /* 48px */
  --pss-space-8: 4rem; /* 64px */

  /* ---------- Radii: rounded and friendly, like the emblem ---------- */

  --pss-radius-sm: 6px;
  --pss-radius-md: 10px;
  --pss-radius-lg: 16px;
  --pss-radius-xl: 24px;
  --pss-radius-pill: 999px;

  /* ---------- Shadows: navy-tinted ---------- */

  --pss-shadow-sm: 0 1px 2px rgba(30, 42, 79, 0.08);
  --pss-shadow-md: 0 4px 12px rgba(30, 42, 79, 0.1);
  --pss-shadow-lg: 0 12px 32px rgba(30, 42, 79, 0.14);
  --pss-shadow-focus: 0 0 0 3px rgba(243, 134, 60, 0.45);

  /* ---------- Motion ---------- */

  --pss-duration-fast: 120ms;
  --pss-duration-base: 200ms;
  --pss-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- Layout ---------- */

  --pss-container-max: 1200px;
}