/* FINDA design-system foundation.
 * Load before legacy styles. Components migrate to these semantic tokens gradually.
 * Layer order is a contract: tokens -> base -> layout -> components -> utilities -> pages.
 */
@layer finda.tokens, finda.base, finda.layout, finda.components, finda.utilities, finda.pages;

@layer finda.tokens {
  :root {
    color-scheme: light;

    --finda-color-brand: #1b3a8c;
    --finda-color-brand-hover: #142e70;
    --finda-color-brand-strong: #0d1b3e;
    --finda-color-accent: #ffa800;
    --finda-color-accent-hover: #ff9500;
    --finda-color-accent-soft: #fff8e1;
    --finda-color-surface: #ffffff;
    --finda-color-canvas: #f6f8ff;
    --finda-color-surface-subtle: #f5f8ff;
    --finda-color-border: #e4ecf8;
    --finda-color-text: #0d1b3e;
    --finda-color-text-muted: #5a6e8a;
    --finda-color-text-subtle: #9eb0ca;
    --finda-color-success: #15803d;
    --finda-color-success-soft: #dcfce7;
    --finda-color-danger: #dc2626;
    --finda-color-danger-soft: #fee2e2;
    --finda-color-warning: #b45309;
    --finda-color-focus: #2563eb;

    --finda-font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --finda-font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --finda-font-size-xs: .75rem;
    --finda-font-size-sm: .875rem;
    --finda-font-size-md: 1rem;
    --finda-font-size-lg: 1.125rem;
    --finda-font-size-xl: 1.25rem;
    --finda-line-height-tight: 1.25;
    --finda-line-height-normal: 1.5;
    --finda-line-height-relaxed: 1.65;

    --finda-space-0: 0;
    --finda-space-1: .25rem;
    --finda-space-2: .5rem;
    --finda-space-3: .75rem;
    --finda-space-4: 1rem;
    --finda-space-5: 1.25rem;
    --finda-space-6: 1.5rem;
    --finda-space-8: 2rem;
    --finda-space-10: 2.5rem;
    --finda-space-12: 3rem;

    --finda-radius-xs: 4px;
    --finda-radius-sm: 8px;
    --finda-radius-md: 12px;
    --finda-radius-lg: 16px;
    --finda-radius-xl: 20px;
    --finda-radius-2xl: 24px;
    --finda-radius-round: 999px;
    --finda-shadow-sm: 0 2px 12px rgba(27, 58, 140, .08);
    --finda-shadow-md: 0 8px 32px rgba(27, 58, 140, .14);
    --finda-shadow-lg: 0 20px 60px rgba(27, 58, 140, .18);

    --finda-container-max: 1600px;
    --finda-container-gutter: 24px;
    --finda-control-min-height: 44px;
    --finda-control-font-size: 1rem;
    --finda-focus-ring: 0 0 0 3px rgba(37, 99, 235, .3);

    --finda-breakpoint-xs: 380px;
    --finda-breakpoint-sm: 480px;
    --finda-breakpoint-md: 640px;
    --finda-breakpoint-lg: 768px;
    --finda-breakpoint-xl: 1024px;
    --finda-breakpoint-2xl: 1280px;

    --finda-z-base: 0;
    --finda-z-sticky: 200;
    --finda-z-bottom-nav: 300;
    --finda-z-dropdown: 500;
    --finda-z-toast: 9000;
    --finda-z-overlay: 10000;
    --finda-z-modal: 10010;
  }

  [data-theme='dark'], .dark-theme {
    color-scheme: dark;
    --finda-color-surface: #16213e;
    --finda-color-canvas: #0c1326;
    --finda-color-surface-subtle: #141e38;
    --finda-color-border: #27345a;
    --finda-color-text: #e8eef8;
    --finda-color-text-muted: #aebdd3;
    --finda-color-text-subtle: #91a2bd;
    --finda-shadow-sm: 0 2px 12px rgba(0, 0, 0, .45);
    --finda-shadow-md: 0 8px 32px rgba(0, 0, 0, .55);
    --finda-shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
  }
}

@layer finda.base {
  :where(button, [href], input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--finda-color-focus);
    outline-offset: 2px;
  }
}

@layer finda.layout {
  .finda-container {
    inline-size: min(100% - (2 * var(--finda-container-gutter)), var(--finda-container-max));
    margin-inline: auto;
  }
}

@layer finda.components {
  .finda-control {
    min-block-size: var(--finda-control-min-height);
    border: 1px solid var(--finda-color-border);
    border-radius: var(--finda-radius-md);
    background: var(--finda-color-surface);
    color: var(--finda-color-text);
    font-size: var(--finda-control-font-size);
  }
  .finda-control[aria-invalid='true'], .finda-control.is-error { border-color: var(--finda-color-danger); }
  .finda-control.is-success { border-color: var(--finda-color-success); }
  .finda-control:disabled { cursor: not-allowed; opacity: .6; }
}

@layer finda.utilities {
  .u-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .u-break-anywhere { overflow-wrap: anywhere; }
}

@media (max-width: 768px) {
  :root { --finda-container-gutter: 16px; }
  :where(.form-input, .phone-wrap input, .price-inp, .sort-sel, .hero-search input, .filter-sec input, .filter-sec select, .filter-sec textarea) {
    font-size: var(--finda-control-font-size);
  }
  :where(.filter-check, .filter-tag-btn) { min-block-size: var(--finda-control-min-height); }
}

@media (max-width: 480px) {
  :root { --finda-container-gutter: 14px; }
}