/* Properstar kit: design tokens
 * Source: Puzzle Design System (PDS) in Confluence ("2 - Colors", "Shadows")
 * and the PLZ library in Figma (button, text, border and radius tokens).
 * Never hardcode a brand value in a page. Use these variables.
 */

/* Inter is the Puzzle body font (Figma: font/family/Body). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Primitives: color scales (500 = the original color) ---------- */
  --properstar-50: #D1F5F7;
  --properstar-100: #A3EAEE;
  --properstar-200: #7AE1E7;
  --properstar-300: #52D8E0;
  --properstar-400: #29CFD8;
  --properstar-500: #00C6D1; /* Properstar turquoise: logo, accents, highlights */
  --properstar-600: #00A6B0;
  --properstar-700: #00878E; /* primary buttons and links (AA contrast on white) */
  --properstar-800: #00676D;
  --properstar-900: #00474B;

  --grey-100: #F5F5F5;
  --grey-200: #EEEEEE;
  --grey-300: #D8D8D8;
  --grey-400: #C4C4C4;
  --grey-500: #9E9E9E;
  --grey-600: #797979;
  --grey-700: #565656;
  --grey-800: #333333;

  --green-50: #C1FFE5; --green-100: #A3EECF; --green-200: #7AE7BA; --green-300: #52E0A5; --green-400: #29D98F;
  --green-500: #00D17A; --green-600: #00B066; --green-700: #008E53; --green-800: #006D3F; --green-900: #004B2C;

  --red-50: #FFE1E4; --red-100: #F4A3AB; --red-200: #EF7A86; --red-300: #EB5261; --red-400: #E6293B;
  --red-500: #E10016; --red-600: #BD0012; --red-700: #99000F; --red-800: #75000B; --red-900: #510008;

  --pink-50: #FFE0EF; --pink-100: #FFA3D1; --pink-200: #FF7ABC; --pink-300: #FF52A8; --pink-400: #FF2993;
  --pink-500: #FF007F; --pink-600: #D6006B; --pink-700: #AD0056; --pink-800: #850042; --pink-900: #5C002E;

  --yellow-50: #FFF4D3; --yellow-100: #FFE9A6; --yellow-200: #FFDF7F; --yellow-300: #FFD557; --yellow-400: #FFCB30;
  --yellow-500: #FFC108; --yellow-600: #D6A207; --yellow-700: #AD8305; --yellow-800: #856404; --yellow-900: #5C4503;

  --blue-50: #D1E7FF; --blue-100: #A3CFFF; --blue-200: #7ABAFF; --blue-300: #52A5FF; --blue-400: #2990FF;
  --blue-500: #007BFF; --blue-600: #0067D6; --blue-700: #0054AD; --blue-800: #004085; --blue-900: #002C5C;

  --purple-50: #F2E2FF; --purple-100: #E3BFFF; --purple-200: #D6A2FF; --purple-300: #CA86FF; --purple-400: #BD69FF;
  --purple-500: #B14DFF; --purple-600: #9541D6; --purple-700: #7834AD; --purple-800: #5C2885; --purple-900: #401C5C;

  --gold-50: #F3E7D9; --gold-100: #EFE3D5; --gold-200: #E8D6C2; --gold-300: #E1C9AF; --gold-400: #DABD9C;
  --gold-500: #D3B089; --gold-600: #B19473; --gold-700: #8F785D; --gold-800: #6E5C47; --gold-900: #4C3F31;

  --white: #FFFFFF;
  --black: #000000;

  /* ---------- Semantic tokens (use these in pages) ---------- */
  --text-primary: var(--grey-800);
  /* Names in comments are the PLZ library (Figma) variables these mirror. */
  --text-secondary: var(--grey-600);   /* text/text-secondary */
  --text-muted: var(--grey-600);
  --text-placeholder: var(--grey-500); /* text/text-placeholder */
  --text-disabled: var(--grey-400);    /* text/text-disabled */
  --text-ai: var(--purple-700);        /* text/text-ai */
  --text-brand: var(--properstar-700);
  --text-on-brand: var(--white);
  --text-success: var(--green-800);
  --text-danger: var(--red-500);
  --text-warning: var(--yellow-800);
  --text-info: var(--blue-800);

  --surface-page: var(--white);
  --surface-subtle: var(--grey-100);  /* surface/background/background-grey-light */
  --surface-muted: var(--grey-200);
  --surface-brand-soft: var(--properstar-50);
  --surface-dark: var(--grey-800);

  --border: var(--grey-300);
  --border-strong: var(--grey-400);
  --border-brand: var(--properstar-700);

  --border-red: var(--red-500);
  --border-yellow: var(--yellow-500);
  --border-purple: var(--purple-500);

  /* surface/button/* */
  --button-primary: var(--properstar-700);
  --button-primary-hover: var(--properstar-800);
  --button-primary-active: var(--properstar-900);
  --button-primary-disabled: var(--grey-400);
  --button-secondary: var(--grey-200);
  --button-secondary-hover: var(--grey-300);
  --button-secondary-active: var(--grey-400);
  --button-active: var(--properstar-50);
  --button-white: var(--white);
  --button-dark: var(--grey-800);
  --button-danger: var(--red-500);
  --button-success: var(--green-500);
  --button-warning: var(--yellow-500);
  --button-favorite: var(--pink-500);
  --button-info: var(--blue-800);
  --button-purple: var(--purple-700);
  --link: var(--properstar-700);
  --link-hover: var(--properstar-800);
  --focus-ring: 0 0 0 3px rgba(0, 198, 209, 0.35);

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: var(--font-sans); /* swap here if marketing uses a display face */

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 56px;

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

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  /* PLZ text styles, as font shorthands: font: var(--font-body-2); */
  --font-h3: 700 20px/1 var(--font-sans);
  --font-h4: 700 16px/22px var(--font-sans);
  --font-h5: 700 14px/18px var(--font-sans);
  --font-body-1: 400 20px/30px var(--font-sans);
  --font-body-2: 400 16px/22px var(--font-sans);
  --font-body-3: 400 14px/18px var(--font-sans);
  --font-button-1: 500 20px/1 var(--font-sans);
  --font-button-2: 500 16px/1 var(--font-sans);
  --font-button-3: 500 14px/21px var(--font-sans);
  --font-caption: 400 10px/1 var(--font-sans);

  /* ---------- Spacing (4px grid) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --gutter: 15px;      /* spacing/spacing-gutter */

  /* PLZ spacing tokens */
  --spacing-none: 0;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --container: 1200px;

  /* ---------- Radius (PLZ: border-radius-3 = 6px for buttons and inputs) ---------- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px; /* border-radius-pill */
  /* PLZ border/radius tokens checked so far */
  --radius-1: 2px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-6: 16px;

  /* ---------- Shadows (PDS "Shadows": use sparingly) ---------- */
  --shadow-modal: 0 2px 15px rgba(0, 0, 0, 0.16);   /* modal-shadow */
  --shadow-button: 0 1px 8px rgba(0, 0, 0, 0.2);     /* button-shadow: buttons on pictures */
  --shadow-content: 0 1px 8px rgba(0, 0, 0, 0.16);   /* content-shadow */
  --shadow-overlay: var(--shadow-content);           /* sticky overlays, elements over pictures and maps */
  --shadow-pin: 0 1px 4px rgba(0, 0, 0, 0.7);     /* map pins */
  --shadow-search: 0 1px 15px rgba(18, 68, 109, 0.25); /* search-hero-shadow, measured on www.properstar.com */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 400ms;
}

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