/* ===================================================================
   Ramekin design tokens — Prompt 42 PR #23 rewrite
   "Crisp, quiet, trustworthy. Blue as structure, not confetti."

   See docs/token_migration.md for the old → new mapping.
   Legacy --color-primary-*, --color-secondary-*, --color-neutral-*,
   --color-accent-*, --bg-* names are kept as aliases pointing at the
   new palette so existing CSS/templates pick up the new look without
   needing a sweep on every file.
   ================================================================= */

:root {
  /* ============================================
     COLOR PALETTE — Calm grocery intelligence
     Blue = action, focus, information
     Dark teal/navy = confidence, structure
     ============================================ */

  /* Background */
  --bg-app: #FBF8F3;
  --bg-surface: #FFFFFF;
  --bg-subtle: #EDEFF0;

  /* Borders */
  --border-subtle: #C2C9CC;
  --border-strong: #8EB9D3;

  /* Text */
  --text-primary: #0F232B;
  --text-secondary: #374F5D;
  --text-muted: #7B8285;

  /* Brand — blue for action, teal for structure */
  --brand-primary: #387A98;
  --brand-primary-hover: #25566C;
  --brand-primary-soft: #C8DCE9;
  --brand-accent: #6BC4ED;
  --brand-accent-soft: #C1E4F7;

  /* Semantic — preserved per Guardrail #2 (functional signals, not branding) */
  --color-success: #4A9D5B;
  --color-warning: #E5A028;
  --color-error: #C2413A;
  --color-danger: #C2413A;
  --color-info: #387A98;

  /* Status tints — for card/row backgrounds */
  --tint-success: #F0FAF2;
  --tint-warning: #FFF8ED;
  --tint-error: #FEF2F1;
  --tint-info: #EFF7FC;

  /* ============================================
     LEGACY COMPATIBILITY ALIASES
     Existing CSS uses these names. Redefining them here so the
     un-touched files pick up the new palette without churn.
     ============================================ */

  /* Old "primary" was warm tomato red — now blue */
  --color-primary-50: #EFF7FC;
  --color-primary-100: #C8DCE9;
  --color-primary-200: #8EB9D3;
  --color-primary-300: #6BC4ED;
  --color-primary-400: #4A9DC3;
  --color-primary-500: #387A98;
  --color-primary-600: #25566C;
  --color-primary-700: #1A3F50;
  --color-primary-800: #133240;
  --color-primary-900: #0F232B;

  /* Old "secondary" was herb green — kept as the success palette */
  --color-secondary-50: #F0FAF2;
  --color-secondary-100: #DCF5E2;
  --color-secondary-500: #4A9D5B;
  --color-secondary-600: #3D8A4D;

  /* Old "accent" was warm orange — kept as the warning palette */
  --color-accent-50: #FFF8ED;
  --color-accent-100: #FFEDD5;
  --color-accent-500: #E5A028;
  --color-accent-600: #C4870E;

  /* Neutrals — was warm gray, now cool gray */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #EDEFF0;
  --color-neutral-100: #E0E3E5;
  --color-neutral-200: #C2C9CC;
  --color-neutral-300: #A0A8AD;
  --color-neutral-400: #7B8285;
  --color-neutral-500: #5A6268;
  --color-neutral-600: #374F5D;
  --color-neutral-700: #25566C;
  --color-neutral-800: #0F232B;
  --color-neutral-900: #0A1820;

  /* Backgrounds */
  --bg-primary: #FBF8F3;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #EDEFF0;

  /* ============================================
     TYPOGRAPHY — Fixed sizes (was fluid clamp)
     Operational tool, not marketing landing.
     ============================================ */

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs: 0.75rem;     /* 12px — metadata, badges */
  --text-sm: 0.875rem;    /* 14px — body, row labels */
  --text-base: 0.875rem;  /* 14px — default body (tighter than before) */
  --text-lg: 1rem;        /* 16px — section titles */
  --text-xl: 1.125rem;    /* 18px — page subtitles */
  --text-2xl: 1.5rem;     /* 24px — page titles */
  --text-3xl: 2rem;       /* 32px — hero/landing only */
  --text-4xl: 2.25rem;    /* 36px — landing only */
  --text-5xl: 3rem;       /* 48px — landing only */

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ============================================
     SPACING — 4px base (unchanged)
     ============================================ */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ============================================
     BORDERS & RADIUS — Tighter, operational
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border-color: var(--border-subtle);

  /* ============================================
     SHADOWS — Controlled, minimal, teal-tinted
     ============================================ */
  --shadow-xs: 0 1px 2px 0 rgba(15, 35, 43, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 35, 43, 0.06);
  --shadow-md: 0 2px 4px rgba(15, 35, 43, 0.06);
  --shadow-lg: 0 4px 8px rgba(15, 35, 43, 0.06);
  --shadow-xl: 0 8px 16px rgba(15, 35, 43, 0.08);
  --shadow-2xl: 0 16px 32px rgba(15, 35, 43, 0.10);

  /* Cards: 1px structure shadow, slightly larger on hover */
  --shadow-card: 0 1px 2px rgba(15, 35, 43, 0.06);
  --shadow-card-hover: 0 2px 6px rgba(15, 35, 43, 0.08);

  /* Removed: --shadow-primary (red glow). No replacement — fall back
     to --shadow-card-hover where rules used it. */

  /* ============================================
     TRANSITIONS — unchanged
     ============================================ */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;

  --transition-colors: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
  --transition-transform: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-shadow: box-shadow 200ms ease;
  --transition-all: all 200ms ease;

  /* ============================================
     Z-INDEX — unchanged
     ============================================ */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* ============================================
     LAYOUT
     ============================================ */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  --header-height: 64px;  /* was 72px — tighter operational nav */
  --sidebar-width: 280px;

  /* ============================================
     DENSITY TOKENS — define only, applied later
     Prompt 42 Phase 7. Aligned with spec values in PR #24.
     Prompts 43 (shopping = dense), 44 (planner = medium),
     45 (home = roomy) consume these. Trip mode (--density-xdense-*)
     intentionally has TALLER rows than shopping list because tap
     targets need 44px minimum on mobile.
     ============================================ */
  --density-roomy-row: 56px;     /* Dashboard */
  --density-roomy-gap: 24px;
  --density-medium-row: 44px;    /* Planner */
  --density-medium-gap: 16px;
  --density-dense-row: 38px;     /* Shopping list */
  --density-dense-gap: 10px;
  --density-xdense-row: 44px;    /* Trip mode — thumb-friendly */
  --density-xdense-gap: 8px;

  /* Trip-row alias kept for any in-flight references */
  --density-trip-row: 44px;
  --density-trip-gap: 8px;

  --density-roomy-padding: 16px;
  --density-medium-padding: 12px;
  --density-dense-padding: 8px;
  --density-trip-padding: 10px;
}