/*
 * SplatImmo design tokens — Flutter -> CSS mirror.
 *
 * Source of truth: splatimmo-mobile/lib/app/theme/{app_colors,app_text_styles,app_theme}.dart
 * Inventory: ../tokens-source.md
 *
 * This file is the ONLY place hex color literals are allowed.
 * The CI guard scripts/check-hex-tokens.sh fails the build on any
 * hex literal found outside this file.
 */

/* ───────── Embedded webfonts ─────────
   Self-hosted to keep the page render path independent of any third-party
   CDN (and to honor the design contract: the same Inter / JetBrainsMono
   used by the Flutter app). License files live in wwwroot/fonts/LICENSES.md.
   font-display: swap → text always paints with the system fallback first,
   then re-paints once the variable woff2 is available, instead of blocking. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/fonts/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations'),
       url('/fonts/InterVariable-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrainsMono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrainsMono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrainsMono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrainsMono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
}

:root {
  /* ───────── Colors (AppColors) ───────── */
  --color-background: #FBFAF7;
  --color-surface: #FFFFFF;
  --color-ink: #1A1A1A;
  --color-ink-2: #3A3A3A;
  --color-muted: #7A7A7A;
  --color-border: #E8E5DF;
  --color-border-strong: #D8D4CC;

  --color-accent: #3FA0B8;
  --color-accent-soft: #E2F1F5;
  --color-accent-ink: #1F4C5C;

  --color-warn: #D49545;
  --color-ok: #4FA46B;
  --color-danger: #D03030;

  --color-on-ink: #FFFFFF;

  /* Pure-black viewer chrome — used by the embedded /embed/tour viewport
     where any non-black background bleeds through translucent splat
     edges. Distinct from --color-ink (#1A1A1A) which is a near-black
     used for body text. */
  --color-viewer-bg: #000000;

  /* Splat tour palettes — used by SplatTourCanvas only.
     Stops: shadow → midtone → highlight → spotlight. */
  --palette-warm-1: #3A2820;
  --palette-warm-2: #7A5A40;
  --palette-warm-3: #D8B078;
  --palette-warm-4: #F4D8A4;

  --palette-cool-1: #0E1820;
  --palette-cool-2: #28384A;
  --palette-cool-3: #4A6A88;
  --palette-cool-4: #A8C8E0;

  --palette-night-1: #06080C;
  --palette-night-2: #0E1218;
  --palette-night-3: #1A2230;
  --palette-night-4: #2C3A50;

  --palette-sage-1: #1A2418;
  --palette-sage-2: #2C3C2A;
  --palette-sage-3: #5A7050;
  --palette-sage-4: #A8C098;

  --palette-cream-1: #2A2418;
  --palette-cream-2: #5A4A30;
  --palette-cream-3: #A8956A;
  --palette-cream-4: #E8D8A8;

  /* ───────── Radius (AppRadius) ───────── */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-xxl: 18px;
  --radius-pill: 999px;

  /* ───────── Spacing (AppSpacing, 4-pt grid) ───────── */
  --spacing-xxs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 14px;
  --spacing-xl: 16px;
  --spacing-xxl: 20px;
  --spacing-screen: 20px;

  /* ───────── Borders ───────── */
  --border-width: 0.5px;
  --border-width-strong: 1px;

  /* ───────── Typography ─────────
     Inter for sans, JetBrainsMono for technical readouts. Both are
     embedded above (@font-face), self-hosted from wwwroot/fonts/.
     System fallbacks remain in the stack so the layout never collapses
     if the woff2 fails to load (font-display: swap handles the loading
     window separately). */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrainsMono', ui-monospace, SFMono-Regular, Menlo,
    Consolas, 'Liberation Mono', monospace;

  /* Text ramp — each token exposes -size / -weight / -tracking / -color
     (and -leading where the Flutter style sets `height`).             */

  --text-display-xl-size: 30px;
  --text-display-xl-weight: 700;
  --text-display-xl-tracking: -0.6px;
  --text-display-xl-leading: 1.1;
  --text-display-xl-color: var(--color-ink);

  --text-display-lg-size: 26px;
  --text-display-lg-weight: 700;
  --text-display-lg-tracking: -0.5px;
  --text-display-lg-leading: 1.15;
  --text-display-lg-color: var(--color-ink);

  --text-h1-size: 24px;
  --text-h1-weight: 700;
  --text-h1-tracking: -0.5px;
  --text-h1-color: var(--color-ink);

  --text-h2-size: 22px;
  --text-h2-weight: 700;
  --text-h2-tracking: -0.4px;
  --text-h2-color: var(--color-ink);

  --text-h3-size: 18px;
  --text-h3-weight: 700;
  --text-h3-tracking: -0.3px;
  --text-h3-color: var(--color-ink);

  --text-h4-size: 16px;
  --text-h4-weight: 700;
  --text-h4-tracking: -0.2px;
  --text-h4-color: var(--color-ink);

  --text-body-lg-size: 16px;
  --text-body-lg-weight: 500;
  --text-body-lg-tracking: -0.2px;
  --text-body-lg-color: var(--color-ink);

  --text-body-md-size: 14px;
  --text-body-md-weight: 500;
  --text-body-md-tracking: 0;
  --text-body-md-leading: 1.5;
  --text-body-md-color: var(--color-ink);

  --text-body-sm-size: 13px;
  --text-body-sm-weight: 500;
  --text-body-sm-tracking: 0;
  --text-body-sm-color: var(--color-ink-2);

  --text-label-md-size: 13px;
  --text-label-md-weight: 600;
  --text-label-md-tracking: -0.2px;
  --text-label-md-color: var(--color-ink);

  --text-label-sm-size: 12px;
  --text-label-sm-weight: 500;
  --text-label-sm-tracking: 0;
  --text-label-sm-color: var(--color-ink-2);

  --text-caption-size: 11px;
  --text-caption-weight: 500;
  --text-caption-tracking: 0;
  --text-caption-color: var(--color-muted);

  --text-overline-size: 11px;
  --text-overline-weight: 600;
  --text-overline-tracking: 0.5px;
  --text-overline-color: var(--color-muted);

  --text-mono-size: 12px;
  --text-mono-weight: 500;
  --text-mono-tracking: 0;
  --text-mono-color: var(--color-muted);

  --text-mono-lg-size: 14px;
  --text-mono-lg-weight: 600;
  --text-mono-lg-tracking: 0;
  --text-mono-lg-color: var(--color-ink);

  --text-price-xl-size: 28px;
  --text-price-xl-weight: 700;
  --text-price-xl-tracking: -0.6px;
  --text-price-xl-color: var(--color-ink);

  /* ───────── Shadows ─────────
     Reproduces the soft elevation used on the Flutter search bar and the
     web equivalents. Values stay in this file because they hard-code the
     shadow color via rgba — every other CSS file references the
     --shadow-* tokens. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.18);

  /* Photo-overlay scrims — translucent surfaces that sit on top of
     hero/listing imagery (3D badge, favorite button bg, gallery
     gradient). Defined here for the same reason as the shadow tokens
     above: the rgba literal lives in tokens.css only. */
  --scrim-dark: rgba(0, 0, 0, 0.65);
  --scrim-dark-soft: rgba(0, 0, 0, 0.35);
  --scrim-light: rgba(255, 255, 255, 0.95);
  --scrim-light-soft: rgba(255, 255, 255, 0.70);

  /* ───────── Breakpoints ─────────
     Used as documentation only — CSS @media queries can't reference custom
     properties, so the actual numbers live in the rules. Keep this list and
     the rules in sync. tablet=768, desktop=1024 mirror the AdminLayout +
     Flutter mobile breakpoints. */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;

  /* ───────── Z-index scale ───────── */
  --z-base: 0;
  --z-sticky: 100;
  --z-nav: 500;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
  --z-error: 1100;

  /* ───────── Motion ───────── */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 280ms;
  --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ───────── Floor plan viewer (FloorPlanViewer.razor) ─────────
     Diagrammatic palette for the 2D plan SVG. Kept distinct from
     the brand palette because rooms must read as clearly-separated
     swatches, not as accent / surface colors. */
  --floor-plan-bg: #F8FAFC;
  --floor-plan-border: #D8DEE5;
  --floor-plan-message-fg: #475569;
  --floor-plan-message-empty-fg: #64748B;
  --floor-plan-message-error-fg: #B91C1C;
  --floor-plan-message-error-bg: #FEF2F2;
  --floor-plan-room-stroke: #1F2933;
  --floor-plan-room-focus-stroke: #2563EB;
  --floor-plan-room-fill-1: #FDE68A;
  --floor-plan-room-fill-2: #BFDBFE;
  --floor-plan-room-fill-3: #BBF7D0;
  --floor-plan-room-fill-4: #FBCFE8;
  --floor-plan-room-fill-5: #DDD6FE;
  --floor-plan-room-fill-6: #FED7AA;
  --floor-plan-room-fill-7: #A5F3FC;
  --floor-plan-room-fill-8: #FECACA;
}