/*
 * Aqary Link — application stylesheet (design tokens + shell).
 * Spec: §19 CSS stack, §20 design system, §21 appearance, §22 RTL,
 *       §66 UI contract, §90.1 breakpoints/layout tokens, §90.2 local assets.
 *
 * Direction-agnostic: uses CSS logical properties so RTL (Arabic) needs no
 * separate stylesheet (§22). Light default + dark via prefers-color-scheme and
 * an explicit [data-theme] override (§21). No CDN, no runtime web fonts (§90.2).
 */

@layer reset, tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------- tokens -- */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Brand primary #119553 — project design seed (decision D3), reconciled with
       the §90 Visual Design System token set (§20). */
    --aq-primary: #119553;
    --aq-primary-600: #0e7d45;
    --aq-primary-050: #e7f4ec;
    --aq-on-primary: #ffffff;

    /* Status (§66.2 / §90 data-viz + status tokens). */
    --aq-success: #119553;
    --aq-warning: #b7791f;
    --aq-danger: #c0362c;
    --aq-info: #2563a8;

    /* Neutral surfaces & ink (light). */
    --aq-bg: #f6f7f9;
    --aq-surface: #ffffff;
    --aq-surface-2: #f1f3f5;
    --aq-text: #14181d;
    --aq-text-muted: #5b6570;
    --aq-border: #dfe3e8;

    /* Radius. */
    --aq-radius-sm: 6px;
    --aq-radius-md: 10px;
    --aq-radius-lg: 16px;

    /* Spacing scale. */
    --aq-space-2xs: 4px;
    --aq-space-xs: 8px;
    --aq-space-sm: 12px;
    --aq-space-md: 16px;
    --aq-space-lg: 24px;
    --aq-space-xl: 32px;
    --aq-space-2xl: 48px;

    /* Typography — Latin uses system-ui (zero download); Arabic swaps in
       Noto Kufi Arabic via @font-face when an RTL/Arabic locale needs it (§90.2). */
    --aq-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --aq-font-arabic: "Noto Kufi Arabic", var(--aq-font-sans);
    --aq-fs-display: clamp(26px, 7vw, 32px);
    --aq-fs-title: clamp(21px, 5.5vw, 24px);
    --aq-fs-body: 15px;
    --aq-fs-sm: 13px;
    --aq-line: 1.5;

    /* Elevation, motion, z, layout (§66.2, §90.1). */
    --aq-shadow-1: 0 1px 2px rgba(20, 24, 29, 0.06), 0 1px 3px rgba(20, 24, 29, 0.08);
    --aq-shadow-2: 0 4px 12px rgba(20, 24, 29, 0.10);
    --aq-motion-fast: 120ms;
    --aq-motion: 200ms;
    --aq-ease: cubic-bezier(0.2, 0, 0, 1);
    --aq-z-nav: 100;
    --aq-z-drawer: 200;
    --aq-z-modal: 300;
    --aq-z-toast: 400;

    --aq-tap-min: 44px;               /* Touch-target floor (§90.1, WCAG 2.2). */
    --aq-container-pad: clamp(16px, 4vw, 24px);
    --aq-container-max: 1280px;

    /* Breakpoint reference values (§90.1). Media queries use the literal px. */
    --aq-bp-xs: 480px;
    --aq-bp-sm: 640px;
    --aq-bp-md: 768px;
    --aq-bp-lg: 1024px;
    --aq-bp-xl: 1280px;
    --aq-bp-2xl: 1440px;
  }

  /* Dark theme — system preference, unless an explicit theme is set (§21). */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --aq-bg: #0f1419;
      --aq-surface: #161b22;
      --aq-surface-2: #1c232b;
      --aq-text: #e7ebef;
      --aq-text-muted: #9aa4af;
      --aq-border: #2a323b;
      --aq-on-primary: #04160e;      /* Deepened for AA on brand green (§90). */
      --aq-primary-050: #10241a;
    }
  }
  :root[data-theme="dark"] {
    --aq-bg: #0f1419;
    --aq-surface: #161b22;
    --aq-surface-2: #1c232b;
    --aq-text: #e7ebef;
    --aq-text-muted: #9aa4af;
    --aq-border: #2a323b;
    --aq-on-primary: #04160e;
    --aq-primary-050: #10241a;
  }
}

/* ------------------------------------------------------------------ reset -- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  .aq-app :is(h1, h2, h3, h4, p, figure) { margin: 0; }
  .aq-app button { font: inherit; color: inherit; }
}

/* ------------------------------------------------------------------- base -- */
@layer base {
  .aq-body {
    margin: 0;
    background: var(--aq-bg);
    color: var(--aq-text);
    font-family: var(--aq-font-sans);
    font-size: var(--aq-fs-body);
    line-height: var(--aq-line);
    -webkit-text-size-adjust: 100%;
  }
  /* Arabic/RTL locales pick up the Arabic stack via the logical dir attr (§22). */
  [dir="rtl"] .aq-app { font-family: var(--aq-font-arabic); }

  .aq-app :focus-visible {
    outline: 2px solid var(--aq-primary);
    outline-offset: 2px;
    border-radius: var(--aq-radius-sm);
  }

  @media (prefers-reduced-motion: reduce) {
    .aq-app *, .aq-app *::before, .aq-app *::after {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
    }
  }
}

/* -------------------------------------------------------------- app shell -- */
@layer components {
  .aq-app {
    min-block-size: 100dvh;
    padding: var(--aq-container-pad);
    padding-block-start: max(var(--aq-container-pad), env(safe-area-inset-top));
  }

  .aq-app__boot {
    display: flex;
    align-items: center;
    gap: var(--aq-space-sm);
    justify-content: center;
    min-block-size: 60dvh;
    color: var(--aq-text-muted);
  }
  .aq-spinner {
    inline-size: 20px;
    block-size: 20px;
    border: 2px solid var(--aq-border);
    border-block-start-color: var(--aq-primary);
    border-radius: 50%;
    animation: aq-spin 700ms linear infinite;
  }
  @keyframes aq-spin { to { transform: rotate(360deg); } }

  .aq-noscript {
    margin: var(--aq-space-md) auto;
    max-inline-size: 40rem;
    padding: var(--aq-space-md);
    background: var(--aq-surface);
    border: 1px solid var(--aq-border);
    border-radius: var(--aq-radius-md);
  }

  /* Minimal shell primitives used by the Phase-0 console bootstrap. */
  .aq-shell { max-inline-size: var(--aq-container-max); margin-inline: auto; }
  .aq-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--aq-space-md);
    padding-block: var(--aq-space-sm);
    border-block-end: 1px solid var(--aq-border);
  }
  .aq-brand { font-weight: 700; color: var(--aq-primary); }
  .aq-card {
    background: var(--aq-surface);
    border: 1px solid var(--aq-border);
    border-radius: var(--aq-radius-lg);
    box-shadow: var(--aq-shadow-1);
    padding: var(--aq-space-lg);
    margin-block-start: var(--aq-space-lg);
  }
  .aq-metric-grid {
    display: grid; gap: var(--aq-space-md);
    grid-template-columns: 1fr;
    margin-block-start: var(--aq-space-lg);
  }
  .aq-metric { background: var(--aq-surface); border: 1px solid var(--aq-border);
    border-radius: var(--aq-radius-md); padding: var(--aq-space-md); }
  .aq-metric__value { font-size: var(--aq-fs-title); font-weight: 700; }
  .aq-metric__label { color: var(--aq-text-muted); font-size: var(--aq-fs-sm); }

  .aq-btn {
    min-block-size: var(--aq-tap-min);
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--aq-space-xs);
    padding-inline: var(--aq-space-md);
    background: var(--aq-primary); color: var(--aq-on-primary);
    border: 0; border-radius: var(--aq-radius-md); cursor: pointer;
    transition: background var(--aq-motion) var(--aq-ease);
  }
  .aq-btn:hover { background: var(--aq-primary-600); }

  .aq-topbar__actions { display: flex; align-items: center; gap: var(--aq-space-sm); }
  .aq-lang { display: inline-flex; align-items: center; }
  .aq-select {
    min-block-size: var(--aq-tap-min);
    padding-inline: var(--aq-space-sm);
    background: var(--aq-surface);
    color: var(--aq-text);
    border: 1px solid var(--aq-border);
    border-radius: var(--aq-radius-md);
  }
  .aq-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ------------------------------------------------------------- responsive -- */
@layer layout {
  @media (min-width: 480px) { .aq-metric-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .aq-metric-grid { grid-template-columns: repeat(4, 1fr); } }
}

/* ------------------------------------------------------------------ *
 * Phase 4 — public marketplace (server-rendered, WCAG 2.2 AA, RTL-safe).
 * Design tokens are shared with the console; logical properties keep the
 * layout direction-agnostic (spec §90, §92.2.3).
 * ------------------------------------------------------------------ */
.aq-public { --aq-brand: #119553; --aq-brand-strong: #0e7a44; color: #14212b; background: #f6f8f7; min-block-size: 100vh; }
/* --aq-brand-strong (#0e7a44) is the AA-contrast green (>=4.5:1 on white) used for
 * normal-size text/controls; the lighter brand green is reserved for large text. */
.aq-skip-link { position: absolute; inset-inline-start: -999px; inset-block-start: 0; background: var(--aq-brand); color: #fff; padding: .6rem 1rem; z-index: 100; }
.aq-skip-link:focus { inset-inline-start: 0; }
.aq-public :focus-visible { outline: 3px solid var(--aq-brand); outline-offset: 2px; }

.aq-public-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem clamp(1rem, 4vw, 3rem); background: #fff; border-block-end: 1px solid #e3e8e6; }
.aq-brand { font-weight: 800; font-size: 1.25rem; color: var(--aq-brand); text-decoration: none; }
.aq-public-nav a, .aq-lang-menu a { color: #14212b; text-decoration: none; margin-inline: .4rem; padding: .6rem .6rem; border-radius: 6px; min-block-size: 44px; display: inline-flex; align-items: center; }
.aq-lang-menu a[aria-current="true"] { background: #e7f3ee; color: var(--aq-brand-strong); font-weight: 700; }
.aq-public-main { padding: clamp(1rem, 4vw, 3rem); max-inline-size: 1200px; margin-inline: auto; }

.aq-hero h1, .aq-search__title { font-size: clamp(1.5rem, 4vw, 2.25rem); margin-block-end: 1rem; }
.aq-filters { display: grid; grid-template-columns: 1fr; gap: .75rem; background: #fff; padding: 1rem; border-radius: 12px; border: 1px solid #e3e8e6; }
@media (min-width: 640px) { .aq-filters { grid-template-columns: repeat(3, 1fr); align-items: end; } }
.aq-field { display: flex; flex-direction: column; gap: .25rem; }
.aq-field label { font-size: .8rem; font-weight: 600; }
.aq-field input, .aq-field select { padding: .55rem .6rem; border: 1px solid #c9d3cf; border-radius: 8px; min-block-size: 44px; font: inherit; }
.aq-btn { min-block-size: 44px; padding: .6rem 1.2rem; background: var(--aq-brand-strong); color: #fff; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; }

.aq-results { position: relative; margin-block-start: 1.5rem; }
.aq-results__count { font-weight: 600; margin-block: 1rem .5rem; }
.aq-toggle { display: inline-flex; border: 1px solid #c9d3cf; border-radius: 999px; overflow: hidden; margin-block-end: 1rem; }
.aq-toggle__btn { padding: .5rem 1.1rem; min-block-size: 44px; display: inline-flex; align-items: center; cursor: pointer; background: #fff; }
.aq-toggle__input { position: absolute; opacity: 0; pointer-events: none; }
/* Visible keyboard focus on the (visually-hidden) radios — ring the matching label,
 * for BOTH radios regardless of DOM position (audit P4-06, WCAG 2.4.7). */
#aq-toggle-list:focus-visible ~ .aq-toggle label[for="aq-toggle-list"],
#aq-toggle-map:focus-visible ~ .aq-toggle label[for="aq-toggle-map"] { outline: 3px solid var(--aq-brand-strong); outline-offset: 2px; }
#aq-toggle-list:checked ~ .aq-toggle label[for="aq-toggle-list"],
#aq-toggle-map:checked ~ .aq-toggle label[for="aq-toggle-map"] { background: var(--aq-brand-strong); color: #fff; }
.aq-view--map { display: none; }
#aq-toggle-map:checked ~ .aq-view--map { display: block; }
#aq-toggle-map:checked ~ .aq-view--list { display: none; }

.aq-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .aq-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .aq-cards { grid-template-columns: repeat(3, 1fr); } }
.aq-card__link { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e8e6; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; block-size: 100%; }
.aq-card__link:hover, .aq-card__link:focus-visible { box-shadow: 0 6px 20px rgba(17,149,83,.12); }
.aq-card__img { inline-size: 100%; block-size: 180px; object-fit: cover; background: #eef2f0; }
.aq-card__img--none { block-size: 120px; }
.aq-card__body { display: flex; flex-direction: column; gap: .25rem; padding: .85rem; }
.aq-badge--featured { align-self: start; background: #f4c430; color: #4a3b00; font-size: .7rem; font-weight: 800; padding: .15rem .5rem; border-radius: 6px; text-transform: uppercase; }
.aq-card__price { font-weight: 800; color: var(--aq-brand-strong); font-size: 1.05rem; }
.aq-card__title { font-weight: 600; }
.aq-card__loc, .aq-card__facts { font-size: .85rem; color: #5a6b64; }
.aq-empty { padding: 2rem; text-align: center; color: #5a6b64; }
.aq-pagination ul { list-style: none; display: flex; gap: .5rem; align-items: center; padding: 0; margin: 1.5rem 0; flex-wrap: wrap; }
.aq-pagination a, .aq-pagination span { min-block-size: 44px; display: inline-flex; align-items: center; padding: .5rem .9rem; border-radius: 8px; text-decoration: none; }
.aq-pagination a { color: var(--aq-brand-strong); border: 1px solid #c9d3cf; }

.aq-map { background: #e8eeeb; border-radius: 12px; padding: 1rem; min-block-size: 320px; }
.aq-map__canvas { min-block-size: 260px; border-radius: 8px; background: repeating-linear-gradient(45deg, #dbe6e0, #dbe6e0 12px, #e8eeeb 12px, #e8eeeb 24px); }
.aq-map__note { font-size: .85rem; color: #5a6b64; margin-block-start: .5rem; }

.aq-detail { background: #fff; border: 1px solid #e3e8e6; border-radius: 12px; padding: clamp(1rem, 3vw, 2rem); }
.aq-detail__price { font-size: 1.4rem; font-weight: 800; color: var(--aq-brand); }
.aq-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; margin-block: 1rem; }
.aq-gallery__img { inline-size: 100%; block-size: 160px; object-fit: cover; border-radius: 8px; }
.aq-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; margin-block: 1rem; }
.aq-fact dt { font-size: .8rem; color: #5a6b64; } .aq-fact dd { margin: 0; font-weight: 700; }
.aq-notice { background: #fff4e5; border: 1px solid #ffd8a8; padding: .75rem 1rem; border-radius: 8px; }
.aq-location__hidden { color: #5a6b64; font-style: italic; }

.aq-public-footer { padding: 2rem clamp(1rem, 4vw, 3rem); background: #14212b; color: #dbe6e0; margin-block-start: 3rem; }
.aq-public-footer a { color: #fff; }

@media (prefers-reduced-motion: reduce) { .aq-public * { transition: none !important; animation: none !important; } }
[dir="rtl"] .aq-toggle { flex-direction: row-reverse; }