/* =========================================================================
   ListingLoom — design tokens as CSS custom properties.
   Generated FROM root design.md — the ONLY place token values may appear.
   Every component stylesheet references var(--...) exclusively. Do not add
   raw hex/px values anywhere else; if a value is missing here, it is missing
   from design.md too — bounce to ux-designer, do not invent it.
   ========================================================================= */

:root {
  /* ---- Primitive scale (referenced only by the semantic layer below) ---- */
  --terracotta-50: #fbeee7;
  --terracotta-100: #f6dccd;
  --terracotta-300: #e3a889;
  --terracotta-500: #c4633f;
  --terracotta-600: #a94f2e;
  --terracotta-700: #8f4227;
  --terracotta-800: #74351f;

  --sage-50: #eef2ec;
  --sage-100: #dde6d9;
  --sage-500: #5f7a5b;
  --sage-600: #4f6749;
  --sage-700: #46603f;

  --amber-50: #fbf1de;
  --amber-100: #f6e2b8;
  --amber-500: #d99a2b;
  --amber-700: #9a6a15;

  --red-50: #fbe9e7;
  --red-600: #b3261e;
  --red-700: #931c16;

  --paper: #fbf7f0;
  --paper-2: #f4ede1;
  --card: #ffffff;
  --ink-900: #2b2420;
  --ink-700: #4a423b;
  --ink-500: #6b6157;
  --ink-400: #8a8078;
  --line: #e7ddd1;
  --line-2: #d8cbb8;

  /* ---- Semantic tokens (components use ONLY these) ---- */
  --color-bg: var(--paper);
  --color-bg-inset: var(--paper-2);
  --color-surface: var(--card);
  --color-surface-soft: var(--terracotta-50);
  --color-surface-sage: var(--sage-50);

  --color-text: var(--ink-900);
  --color-text-strong: var(--ink-700);
  --color-text-muted: var(--ink-500);
  --color-text-disabled: var(--ink-400);
  --color-text-placeholder: var(--ink-500); /* AA-safe input placeholder (≥4.5:1 on all surfaces) */
  --color-text-on-primary: #ffffff;
  --color-text-on-dark: var(--paper);

  --color-primary: var(--terracotta-600);
  --color-primary-hover: var(--terracotta-700);
  --color-primary-active: var(--terracotta-800);
  --color-primary-soft: var(--terracotta-50);
  --color-primary-border: var(--terracotta-300);

  --color-accent: var(--sage-600);
  --color-accent-soft: var(--sage-50);
  --color-accent-text: var(--sage-700);

  --color-success: var(--sage-700);
  --color-success-soft: var(--sage-50);
  --color-warning: var(--amber-700);
  --color-warning-fill: var(--amber-500);
  --color-warning-soft: var(--amber-50);
  --color-danger: var(--red-600);
  --color-danger-hover: var(--red-700);
  --color-danger-soft: var(--red-50);

  --color-border: var(--line);
  --color-border-strong: var(--line-2);

  --color-focus-ring: var(--terracotta-600);

  --color-skeleton-base: var(--paper-2);
  --color-skeleton-sheen: #fdfaf4;

  /* ---- Type ---- */
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

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

  /* role: size / line-height / weight (letter-spacing applied per-role in components.css) */
  --text-display-size: clamp(38px, 6vw, 56px);
  --text-display-line: 1.04;
  --text-display-weight: var(--weight-semibold);

  --text-h1-size: 40px;
  --text-h1-line: 1.08;
  --text-h1-weight: var(--weight-semibold);

  --text-h2-size: 31px;
  --text-h2-line: 1.15;
  --text-h2-weight: var(--weight-semibold);

  --text-h3-size: 24px;
  --text-h3-line: 1.25;
  --text-h3-weight: var(--weight-semibold);

  --text-lg-size: 20px;
  --text-lg-line: 1.4;
  --text-lg-weight: var(--weight-medium);

  --text-body-size: 16px;
  --text-body-line: 1.6;
  --text-body-weight: var(--weight-regular);

  --text-body-strong-size: 16px;
  --text-body-strong-line: 1.6;
  --text-body-strong-weight: var(--weight-semibold);

  --text-sm-size: 14px;
  --text-sm-line: 1.5;
  --text-sm-weight: var(--weight-regular);

  --text-sm-med-size: 14px;
  --text-sm-med-line: 1.5;
  --text-sm-med-weight: var(--weight-medium);

  --text-xs-size: 12px;
  --text-xs-line: 1.45;
  --text-xs-weight: var(--weight-medium);

  --text-button-size: 16px;
  --text-button-line: 1;
  --text-button-weight: var(--weight-semibold);
  --text-button-sm-size: 14px;

  --text-mono-sm-size: 13px;
  --text-mono-sm-line: 1.4;
  --text-mono-sm-weight: var(--weight-medium);

  /* ---- Spacing (4px base unit — only these steps exist) ---- */
  --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;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radii ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgb(43 36 32 / 0.06);
  --shadow-sm: 0 2px 6px rgb(43 36 32 / 0.08);
  --shadow-md: 0 8px 28px rgb(43 36 32 / 0.1);
  --shadow-lg: 0 18px 48px rgb(43 36 32 / 0.14);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 45%, transparent);
  --shadow-inset-input: inset 0 1px 2px rgb(43 36 32 / 0.05);

  /* ---- Motion ---- */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-emphasis: cubic-bezier(0.3, 0, 0, 1);
  --easing-exit: cubic-bezier(0.4, 0, 1, 1);

  --skeleton-sheen-duration: 1400ms;
  --skeleton-sheen-gradient: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-skeleton-sheen) 50%,
    transparent 100%
  );
  --reveal-duration: 260ms;
  --reveal-easing: cubic-bezier(0.2, 0, 0, 1);
  --reveal-stagger: 90ms;
  --tag-pop-duration: 180ms;
  --tag-pop-stagger: 24ms;
  --toast-visible-duration: 1500ms;

  /* ---- Breakpoints (referenced in comments; actual queries are min-width literals) ---- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --content-max: 1120px;
  --content-max-narrow: 640px;

  /* ---- Component tokens ---- */
  --button-height: 48px;
  --button-height-sm: 40px;
  --button-padding-x: var(--space-6);
  --button-padding-x-sm: var(--space-5);
  --button-gap: var(--space-2);

  --input-height: 48px;
  --input-min-height-textarea: 92px;
  --input-radius: var(--radius-sm);
  --input-padding-x: var(--space-4);
  --input-padding-y: var(--space-3);
  --input-focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);

  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-md);
  --card-padding: var(--space-6);
  --card-padding-mobile: var(--space-5);

  --tag-radius: var(--radius-full);
  --tag-padding: var(--space-1) var(--space-3);
  --chip-radius: var(--radius-full);
  --chip-padding: var(--space-2) var(--space-3);

  --touch-target-min: 44px; /* coarse-pointer minimum tap target (WCAG 2.5.5 / platform HIG) */

  --meter-height: 6px;

  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-lg);
  --modal-padding: var(--space-6);
  --modal-padding-mobile: var(--space-5);
  --modal-overlay: rgb(43 36 32 / 0.44);
  --modal-max-width: 440px;

  --toast-radius: var(--radius-sm);
  --toast-shadow: var(--shadow-md);
  --toast-padding: var(--space-3) var(--space-4);

  --skeleton-radius: var(--radius-xs);
  --skeleton-line-height: 14px;
  --skeleton-gap: var(--space-2);

  --banner-radius: var(--radius-sm);
  --banner-padding: var(--space-3) var(--space-4);
}

/* Respect prefers-reduced-motion globally: kill the sheen loop, reveal translate,
   and tag-pop scale everywhere they're used (design.md Motion accessibility note). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --skeleton-sheen-duration: 0ms;
    --reveal-duration: 120ms;
    --tag-pop-duration: 0ms;
    --tag-pop-stagger: 0ms;
    --reveal-stagger: 0ms;
  }
}