/* Strandvägen 18 — webfonts
   No brand font binaries were provided; Google Fonts CDN substitutes:
   Cormorant Garamond (display serif) + Karla (body sans). */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Karla:ital,wght@0,400;0,500;0,700;1,400&display=swap");

/* Strandvägen 18 — color tokens
   Palette drawn from the villa photo: grey-white timber panelling,
   charcoal roof tile, summer-green garden, overcast Nordic sky. */

:root {
  /* Base — neutrals (timber panelling / roof) */
  --sv-white: #fdfdfb;
  --sv-panel-50: #f6f6f2;
  --sv-panel-100: #eeeee8;
  --sv-panel-200: #e0e1d9;
  --sv-panel-300: #c9cbc1;
  --sv-panel-400: #a9aca1;
  --sv-slate-500: #7c8280;
  --sv-slate-600: #5d6462;
  --sv-roof-700: #474c4b;
  --sv-roof-800: #33403f;
  --sv-roof-900: #232c2b;

  /* Base — greens (garden, fruit trees) */
  --sv-green-100: #e4ecdc;
  --sv-green-300: #a8c18d;
  --sv-green-500: #5f8145;
  --sv-green-600: #4a6a36;
  --sv-green-700: #3a5429;

  /* Base — sky (overcast blue-grey) */
  --sv-sky-100: #e7ecee;
  --sv-sky-300: #b3c1c8;
  --sv-sky-500: #6f8794;
  --sv-sky-700: #465863;

  /* Base — accent (warm gable light) */
  --sv-sun-100: #f5eedd;
  --sv-sun-400: #d9b268;
  --sv-sun-600: #a97f34;

  /* Semantic — text */
  --text-heading: var(--sv-roof-900);
  --text-body: var(--sv-roof-800);
  --text-muted: var(--sv-slate-600);
  --text-faint: var(--sv-slate-500);
  --text-inverse: var(--sv-white);
  --text-link: var(--sv-green-600);

  /* Semantic — surfaces */
  --surface-page: var(--sv-panel-50);
  --surface-card: var(--sv-white);
  --surface-raised: var(--sv-white);
  --surface-sunken: var(--sv-panel-100);
  --surface-inverse: var(--sv-roof-900);

  /* Semantic — actions */
  --action-primary: var(--sv-green-600);
  --action-primary-hover: var(--sv-green-700);
  --action-primary-text: var(--sv-white);
  --action-secondary-border: var(--sv-panel-300);
  --action-secondary-hover: var(--sv-panel-100);

  /* Semantic — borders & focus */
  --border-default: var(--sv-panel-200);
  --border-strong: var(--sv-panel-300);
  --border-input: var(--sv-panel-300);
  --focus-ring: var(--sv-sky-500);

  /* Semantic — status */
  --status-success: var(--sv-green-500);
  --status-success-bg: var(--sv-green-100);
  --status-info: var(--sv-sky-700);
  --status-info-bg: var(--sv-sky-100);
  --status-warning: var(--sv-sun-600);
  --status-warning-bg: var(--sv-sun-100);
  --status-danger: #9a4a38;
  --status-danger-bg: #f3e4df;
}

/* Strandvägen 18 — typography tokens
   Display: Cormorant Garamond (Google Fonts substitute — no brand fonts provided)
   Body/UI: Karla (Google Fonts substitute) */

:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* Scale */
  --type-hero: 400 clamp(44px, 6vw, 72px)/1.05 var(--font-display);
  --type-h1: 500 44px/1.1 var(--font-display);
  --type-h2: 500 32px/1.15 var(--font-display);
  --type-h3: 600 22px/1.3 var(--font-display);
  --type-lead: 400 19px/1.55 var(--font-body);
  --type-body: 400 16px/1.6 var(--font-body);
  --type-small: 400 14px/1.5 var(--font-body);
  --type-caption: 400 12.5px/1.4 var(--font-body);
  --type-label: 700 11px/1.2 var(--font-body);
  --type-button: 700 15px/1 var(--font-body);

  /* Letterspacing */
  --tracking-label: 0.14em;   /* uppercase eyebrows & labels */
  --tracking-display: -0.01em;
}

/* Strandvägen 18 — spacing, radii, shadows, motion */

:root {
  /* Spacing (4px base) */
  --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;

  /* Radii — calm, slightly soft; never pill except tags */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadows — soft daylight, low contrast */
  --shadow-card: 0 1px 2px rgba(35, 44, 43, 0.06), 0 4px 16px rgba(35, 44, 43, 0.06);
  --shadow-raised: 0 2px 6px rgba(35, 44, 43, 0.08), 0 12px 32px rgba(35, 44, 43, 0.10);
  --shadow-overlay: 0 8px 24px rgba(35, 44, 43, 0.14), 0 24px 64px rgba(35, 44, 43, 0.18);

  /* Motion — quiet fades, no bounce */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-med: 220ms; /* @kind other */

  /* Layout */
  --content-max: 1080px;
  --content-pad: clamp(20px, 5vw, 48px);
}