/* ==========================================================================
   Marketplace Costin — design tokens
   Three layers:
     1. Primitives  — raw palette, never used by components directly
     2. Semantic    — what a colour means (surface, text, primary…), per theme
     3. Scales      — type, spacing, radii, shadows, motion, layers
   Components use layers 2 and 3 only. These names map 1:1 to the future
   Tailwind theme.
   ========================================================================== */

:root {
  /* ---- 1. Primitives ------------------------------------------------------ */

  /* Brand blue: interactive colour (links, selection, focus, primary actions) */
  --blue-50: #eef6ff;
  --blue-100: #d9eaff;
  --blue-200: #bcdaff;
  --blue-300: #8ec3ff;
  --blue-400: #59a2ff;
  --blue-500: #2f7fff;
  --blue-600: #1763f0;
  --blue-700: #114ddc;
  --blue-800: #153fb2;
  --blue-900: #17398c;
  --blue-950: #132455;

  /* Brand green: publishing, money, success, "go" moments */
  --green-50: #ecfdf1;
  --green-100: #d2f9de;
  --green-200: #a8f1c1;
  --green-300: #6fe29b;
  --green-400: #34c96f;
  --green-500: #13ad52;
  --green-600: #0c8538;
  --green-700: #0d6a2f;
  --green-800: #0f5329;
  --green-900: #0e4424;
  --green-950: #032612;

  /* Gray: light-theme neutrals, a faint green cast like map paper (parks and water carry the brand) */
  --gray-0: #ffffff;
  --gray-25: #fcfdfb;
  --gray-50: #f7f8f4;
  --gray-100: #f0f2ec;
  --gray-200: #e2e6dc;
  --gray-300: #ccd2c6;
  --gray-400: #98a197;
  --gray-500: #6a756c;
  --gray-600: #4f5b53;
  --gray-700: #374039;
  --gray-800: #232a25;
  --gray-900: #15201a;

  /* Ink: dark-theme neutrals, a deep blue-green like a night map */
  --ink-100: #e6eeea;
  --ink-200: #c9d4ce;
  --ink-300: #a6b4ad;
  --ink-400: #76867f;
  --ink-500: #52625c;
  --ink-600: #35444a;
  --ink-700: #24313a;
  --ink-750: #1f2a31;
  --ink-800: #19232a;
  --ink-850: #131b1e;
  --ink-900: #10171a;
  --ink-950: #0c1214;

  /* Status */
  --red-50: #fff1f1;
  --red-100: #ffdfdf;
  --red-400: #f87171;
  --red-500: #e5484d;
  --red-600: #cc2f35;
  --red-700: #a8232a;
  --amber-50: #fff8eb;
  --amber-100: #feeac7;
  --amber-400: #fbbf3c;
  --amber-500: #f59e0b;
  --amber-700: #a35c06;
  --gold-400: #ffb020;

  /* ---- 3. Scales (theme-independent) -------------------------------------- */

  /* Type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem; /* 11 */
  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.875rem; /* 14 */
  --text-md: 1rem; /* 16 — body */
  --text-lg: 1.125rem; /* 18 */
  --text-xl: 1.375rem; /* 22 */
  --text-2xl: 1.75rem; /* 28 */
  --text-3xl: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem); /* 30 → 40 */
  --text-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); /* 36 → 60 */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

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

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  /* Spacing: 4 px base */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem; /* 2 */
  --space-1: 0.25rem; /* 4 */
  --space-1-5: 0.375rem; /* 6 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-8: 2rem; /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */
  --space-20: 5rem; /* 80 */
  --space-24: 6rem; /* 96 */

  /* Radii: generous, cards are clearly rounded */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px; /* cards */
  --radius-xl: 28px; /* sheets, hero panels */
  --radius-2xl: 36px;
  --radius-full: 9999px;

  /* Sizes */
  --control-sm: 2.25rem; /* 36 */
  --control-md: 2.75rem; /* 44 — minimum touch target */
  --control-lg: 3.25rem; /* 52 */
  --container: 76rem; /* 1216 */
  --container-narrow: 48rem;

  /* Motion */
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --duration-slower: 520ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layers */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-sheet: 400;
  --z-toast: 500;
}

/* ---- 2. Semantic: light theme (default) ----------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: var(--gray-50);
  --bg-subtle: var(--gray-100);
  --surface: var(--gray-0);
  --surface-raised: var(--gray-0);
  --surface-sunken: var(--gray-50);
  --surface-hover: var(--gray-100);
  --surface-inverse: var(--ink-900);

  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-subtle: var(--gray-100);

  --text: var(--gray-900);
  --text-muted: var(--gray-600);
  --text-subtle: var(--gray-500);
  --text-inverse: var(--gray-25);
  --text-disabled: var(--gray-400);

  --primary: var(--blue-600);
  --primary-hover: var(--blue-700);
  --primary-active: var(--blue-800);
  --primary-soft: var(--blue-50);
  --primary-soft-hover: var(--blue-100);
  --primary-text: var(--blue-700);
  --on-primary: #ffffff;

  --accent: var(--green-600);
  --accent-hover: var(--green-700);
  --accent-active: var(--green-800);
  --accent-soft: var(--green-50);
  --accent-text: var(--green-700);
  --on-accent: #ffffff;

  --success: var(--green-600);
  --success-soft: var(--green-50);
  --success-border: var(--green-200);
  --warning: var(--amber-700);
  --warning-soft: var(--amber-50);
  --warning-border: var(--amber-100);
  --danger: var(--red-600);
  --danger-hover: var(--red-700);
  --danger-solid: var(--red-600);
  --danger-soft: var(--red-50);
  --danger-border: var(--red-100);
  --info: var(--blue-700);
  --info-soft: var(--blue-50);
  --info-border: var(--blue-100);

  --star: var(--gold-400);
  --star-empty: var(--gray-200);
  --promoted: var(--amber-500);
  --promoted-soft: var(--amber-50);

  --focus-outline: var(--blue-600);
  --focus-field: 0 0 0 3px color-mix(in oklab, var(--blue-600) 12%, transparent);
  --overlay: rgb(20 18 14 / 0.45);
  --skeleton: var(--gray-100);
  --skeleton-shine: var(--gray-50);

  --shadow-xs: 0 1px 2px rgb(30 29 26 / 0.06);
  --shadow-sm: 0 1px 2px rgb(30 29 26 / 0.05), 0 2px 8px -2px rgb(30 29 26 / 0.08);
  --shadow-md: 0 2px 4px -1px rgb(30 29 26 / 0.05), 0 10px 24px -6px rgb(30 29 26 / 0.12);
  --shadow-lg: 0 4px 8px -2px rgb(30 29 26 / 0.06), 0 20px 44px -10px rgb(30 29 26 / 0.18);
  --shadow-xl: 0 8px 16px -4px rgb(30 29 26 / 0.08), 0 36px 72px -14px rgb(30 29 26 / 0.26);

  /* Placeholder imagery (stands in for real photos until the app has them) */
  --ph-bg: var(--gray-100);
  --ph-ink: var(--gray-400);

  /* Map: the palette the neutrals are drawn from (MapLibre style uses the same values) */
  --map-land: var(--gray-100);
  --map-block: var(--gray-200);
  --map-road: var(--gray-0);
  --map-road-minor: var(--gray-200);
  --map-park: color-mix(in oklab, var(--green-300) 40%, var(--gray-100));
  --map-water: color-mix(in oklab, var(--blue-300) 55%, var(--gray-100));
}

/* ---- 2. Semantic: dark theme ---------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--ink-950);
  --bg-subtle: var(--ink-900);
  --surface: var(--ink-850);
  --surface-raised: var(--ink-800);
  --surface-sunken: var(--ink-900);
  --surface-hover: var(--ink-750);
  --surface-inverse: var(--gray-50);

  --border: var(--ink-700);
  --border-strong: var(--ink-600);
  --border-subtle: var(--ink-800);

  --text: var(--ink-100);
  --text-muted: var(--ink-300);
  --text-subtle: var(--ink-400);
  --text-inverse: var(--ink-950);
  --text-disabled: var(--ink-500);

  --primary: var(--blue-600);
  --primary-hover: var(--blue-500);
  --primary-active: var(--blue-700);
  --primary-soft: color-mix(in oklab, var(--blue-500) 16%, transparent);
  --primary-soft-hover: color-mix(in oklab, var(--blue-500) 24%, transparent);
  --primary-text: var(--blue-400);
  --on-primary: #ffffff;

  --accent: var(--green-600);
  --accent-hover: var(--green-500);
  --accent-active: var(--green-700);
  --accent-soft: color-mix(in oklab, var(--green-500) 15%, transparent);
  --accent-text: var(--green-400);
  --on-accent: #ffffff;

  --success: var(--green-400);
  --success-soft: color-mix(in oklab, var(--green-500) 13%, transparent);
  --success-border: color-mix(in oklab, var(--green-500) 30%, transparent);
  --warning: var(--amber-400);
  --warning-soft: color-mix(in oklab, var(--amber-500) 13%, transparent);
  --warning-border: color-mix(in oklab, var(--amber-500) 30%, transparent);
  --danger: var(--red-400);
  --danger-hover: var(--red-700);
  --danger-solid: var(--red-600);
  --danger-soft: color-mix(in oklab, var(--red-500) 14%, transparent);
  --danger-border: color-mix(in oklab, var(--red-500) 32%, transparent);
  --info: var(--blue-400);
  --info-soft: color-mix(in oklab, var(--blue-500) 14%, transparent);
  --info-border: color-mix(in oklab, var(--blue-500) 30%, transparent);

  --star: var(--gold-400);
  --star-empty: var(--ink-600);
  --promoted: var(--amber-400);
  --promoted-soft: color-mix(in oklab, var(--amber-500) 14%, transparent);

  --focus-outline: var(--blue-400);
  --focus-field: 0 0 0 3px color-mix(in oklab, var(--blue-400) 16%, transparent);
  --overlay: rgb(3 5 9 / 0.66);
  --skeleton: var(--ink-800);
  --skeleton-shine: var(--ink-750);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 8px -2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.35), 0 10px 24px -6px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 4px 8px -2px rgb(0 0 0 / 0.4), 0 20px 44px -10px rgb(0 0 0 / 0.6);
  --shadow-xl: 0 8px 16px -4px rgb(0 0 0 / 0.45), 0 36px 72px -14px rgb(0 0 0 / 0.7);

  --ph-bg: var(--ink-800);
  --ph-ink: var(--ink-500);

  --map-land: var(--ink-900);
  --map-block: var(--ink-850);
  --map-road: var(--ink-750);
  --map-road-minor: var(--ink-800);
  --map-park: color-mix(in oklab, var(--green-500) 20%, var(--ink-900));
  --map-water: color-mix(in oklab, var(--blue-500) 30%, var(--ink-900));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}