/**
 * Kominka variant — design tokens.
 *
 * "Mountain lodge meets Japanese folk house": sumi charcoal, warm cedar,
 * hunting green, ember orange and tatami cream. Shared theme CSS consumes
 * these via var(--*). The active variant's tokens are enqueued as
 * `accommodate-variables` in `includes/theme-setup.php` and injected into
 * the hosted booking page by the `/css/booking-iframe` endpoint.
 *
 * @package Accommodate
 */

:root {
  /* Root font size — rem base for all fluid sizes below. The embedded
     booking widget reads this (via JS) and pins <html> to 16px so rem
     values match the theme even when the host page uses a different
     root font-size. Not applied from CSS so other RentalsManager
     layouts are never affected. */
  --root-font-size: 16px;

  /* Colors — ember fire drives CTAs, hunting green supports, cedar and
     sumi ground. No pure white; tatami cream is the light surface. */
  --color-primary: #C45A2C;
  --color-primary-light: #D06A35;
  --color-primary-dark: #A74B23;
  --color-secondary: #3E5C3A;
  --color-secondary-light: #53724E;
  --color-secondary-dark: #2E472B;

  --color-surface: #EAE2D1;
  --color-surface-alt: #E1D7C2;
  --color-surface-alt-2: #D5C7A6;
  --color-surface-elevated: #F0E9DA;

  --color-text: #211D19;
  --color-text-light: #47403A;
  --color-text-muted: #6B5A45;
  --color-text-inverse: #F0E9DA;

  --color-border: #C9B78F;
  --color-border-light: #DCD1B6;

  --color-footer-bg: #1E1C1A;
  --color-sidemenu-bg: var(--color-footer-bg);

  --color-success: #4F7A3E;
  --color-warning: #B56B2C;
  --color-error: #A94442;
  --color-info: #6B7F6E;

  /* Small-text accent — a deeper ember that clears 4.5:1 on the tatami
     surfaces (brand ember stays for CTAs, icons and large text). */
  --color-accent-text: #9A3F18;
  --color-accent-text-hover: #7E3010;

  /* Label/badge tones — solid badge bg + its text color. */
  --color-label-bg: var(--color-secondary);
  --color-label-text: var(--color-secondary);

  /* Buttons — single coherent treatment. Light mode: sumi ink block on the
     light surface. Hover deepens into ember fire. */
  --color-btn-bg: var(--color-black);
  --color-btn-text: var(--color-text-inverse);
  --color-btn-bg-hover: #9A3F18;
  --color-btn-text-hover: var(--color-text-inverse);

  /* Embedded form controls (assets/css/forms.css) — raised washi paper
     fields on the tatami surface, rectilinear like the rest of the variant. */
  --color-input-bg: var(--color-surface-elevated);
  --radius-input: var(--radius-sm);
  --radius-btn: var(--radius-sm);

  /* Typography — Noto Serif JP headings, Noto Sans JP body (bilingual). */
  --font-heading: 'Noto Serif JP', serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes - Fluid. A literary, wood-and-tatami scale: compact micro
     text, comfortable body, and serif headings with real presence. */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.8125rem + 0.3125vw, 0.9375rem);
  --text-base: clamp(1rem, 0.9375rem + 0.3125vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.0625rem + 0.3125vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.125rem + 0.625vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 1.9375rem);
  --text-3xl: clamp(1.875rem, 1.4375rem + 2.1875vw, 2.625rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.125rem);

  /* Heading scale — consumed by base.css h1-h6 so heading sizes stay
     variant-driven. Each level aliases a fluid scale token (h1 = 4xl). */
  --text-h1: var(--text-4xl);
  --text-h2: var(--text-3xl);
  --text-h3: var(--text-2xl);
  --text-h4: var(--text-xl);
  --text-h5: var(--text-lg);
  --text-h6: var(--text-base);

  /* Line Heights — tight serif headings, generous mixed CJK/Latin body. */
  --leading-tight: 1.3;
  --leading-snug: 1.45;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Semantic weights — headings and buttons warm up to medium serif. */
  --weight-heading: var(--weight-medium);
  --weight-btn: var(--weight-medium);

  /* Letter Spacing — headings breathe slightly; uppercase labels track out
     like a hand-lettered sign. */
  --tracking-heading: 0.015em;
  --tracking-label: 0.08em;

  /* Spacing */
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --content-width: 1200px;
  --content-width-narrow: 800px;
  --sidebar-width: 350px;
  --header-height: 80px;
  --header-height-scrolled: 64px;

  /* Reading measure — ideal prose line length (~66-68 characters). */
  --measure: 68ch;

  /* Borders & Shadows — rectilinear, warm sumi casts. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-2xl: 8px;
  --radius-full: 9999px;

  /* Gallery + amenity shape tokens — rectilinear treatment for the listing
     gallery and amenity blocks. Shared CSS consumes these so Cozy can keep
     its rounded/pill look while kominka stays sharp-edged. */
  --radius-amenity-icon: var(--radius-sm);
  --radius-featured: var(--radius-sm);
  --radius-gallery: var(--radius-sm);
  --radius-gallery-btn: var(--radius-sm);
  --radius-carousel-nav: var(--radius-sm);
  --radius-carousel-dot: 0;

  /* Booking widget offer/rate badge — rectilinear tag (vs Cozy's pill). */
  --radius-badge: var(--radius-sm);

  --shadow-xs: 0 1px 2px rgb(30 28 26 / 0.06);
  --shadow-sm: 0 1px 3px rgb(30 28 26 / 0.1), 0 1px 2px rgb(30 28 26 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(30 28 26 / 0.12), 0 2px 4px -1px rgb(30 28 26 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(30 28 26 / 0.14), 0 4px 6px -2px rgb(30 28 26 / 0.06);
  --shadow-xl: 0 20px 25px -5px rgb(30 28 26 / 0.16), 0 10px 10px -5px rgb(30 28 26 / 0.06);
  --shadow-2xl: 0 25px 50px -12px rgb(30 28 26 / 0.28);

  /* Card — cedar ring defines every edge, warm drop adds depth. */
  --shadow-card: 0 0 0 1px rgb(139 94 60 / 0.16), 0 6px 24px 0 rgb(30 28 26 / 0.14);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* Icon Sizes (em) */
  --icon-size: 1.5em;
  --icon-size-sm: 1.125em;
  --icon-size-lg: 1.75em;
  --icon-size-xl: 2em;
  --icon-size-2xl: 2.5em;

  /* Icon Sizes (rem — fixed pixel sizes) */
  --icon-size-amenity: 3rem;        /* 48px — Amenities block */
  --icon-size-featured: 3rem;       /* 48px — Featured Amenity block */
  --icon-size-booking: 2rem;       /* 32px — Booking iframe placeholder */

  /* Container */
  --container-padding: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* RentalsManager booking widget
     Tokens used by the embedded booking form
     (assets-service/embed/src/booking-layout.css). Widget-only values live here
     so the variant is the single source of truth; several derive from the
     scale tokens above. */
  --color-black: #1E1C1A;
  --color-disabled: #C9BFA6;
  --color-unavailable: #A04432;
  --color-unavailable-soft: #C2604A;
  --color-unavailable-text: #A29682;
  --border-width: 0.0625rem;
  --calendar-width: 18.75rem;
  --size-field: var(--space-2xl);
  --size-day: 2.625rem;
  --size-picker-cell: 3.375rem;
  --space-fields: var(--space-md);
  --space-block: var(--space-md);
  --padding-field: var(--space-xs) var(--space-md);
  --padding-btn: 0 var(--space-md);
}

/* Dark palette — "kominka at night": sumi house lit by firelight. Applied
   by the theme-mode switch (html[data-theme="dark"]). Non-color tokens
   (fonts, sizes, spacing, radius, layout) are shared with the light palette. */
:root[data-theme="dark"] {
  --color-primary: #D96F38;
  --color-primary-light: #E57A43;
  --color-primary-dark: #C45A2C;
  --color-secondary: #6C8A64;
  --color-secondary-light: #839C7A;
  --color-secondary-dark: #587350;

  --color-surface: #201C18;
  --color-surface-alt: #282319;
  --color-surface-alt-2: #332C22;
  --color-surface-elevated: #2A251C;

  --color-text: #EDE3D2;
  --color-text-light: #D6CCBA;
  --color-text-muted: #A39884;
  --color-text-inverse: #EDE3D2;

  --color-border: #4A4234;
  --color-border-light: #3A3428;

  --color-footer-bg: #171410;

  --color-success: #7C9C6B;
  --color-warning: #C9833C;
  --color-error: #C25B48;
  --color-info: #8A9B80;

  /* Small-text accent — the fire-bright ember clears 4.5:1 on the dark
     surfaces; hover brightens further. */
  --color-accent-text: var(--color-primary);
  --color-accent-text-hover: var(--color-primary-light);

  /* Label/badge tones — deep forest badge, light moss label text. */
  --color-label-bg: #4A643F;
  --color-label-text: var(--color-secondary-light);

  /* Buttons — dark mode: the ember (fire) block on the dark surface.
     Hover deepens the fire and swaps to cream text for contrast. */
  --color-btn-bg: var(--color-primary);
  --color-btn-text: var(--color-surface);
  --color-btn-bg-hover: #9A3F18;
  --color-btn-text-hover: var(--color-text-inverse);

  /* Embedded form controls — firelit surface raised off the sumi ground. */
  --color-input-bg: var(--color-surface-elevated);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -1px rgb(0 0 0 / 0.32);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -2px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 10px 10px -5px rgb(0 0 0 / 0.32);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);
  --shadow-card: 0 0 0 1px rgb(0 0 0 / 0.4), 0 6px 24px 0 rgb(0 0 0 / 0.5);

  --color-black: #0F0D0B;
  --color-disabled: #7A7264;
  --color-unavailable: #C25B4E;
  --color-unavailable-soft: #9A4A3F;
  --color-unavailable-text: #8A8175;
}