/* Quick Estate admin — design tokens.
 *
 * The ONLY file in web/ allowed a raw visual value: every colour, size, font,
 * shadow, z level and duration is named here and read everywhere else through
 * var(). tests/test_admin_design_system.py enforces it (T1), checks that every
 * var() is defined and every token used (T4), and checks contrast (T5).
 *
 * Two tiers: primitives (the palette and scales, named for what they are) and
 * semantic tokens (named for what they do). Components read semantic tokens;
 * a primitive is used only by a token. Light theme only.
 *
 * Breakpoints live here too, because a custom property cannot be read inside
 * a media query: below each width the LAYOUT tokens change, and components
 * follow.
 */

/* --- Type: Google Sans + Google Sans Code, self-hosted (OFL, see ../fonts) --- */

@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/GoogleSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/GoogleSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Google Sans Code";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/GoogleSansCode-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Google Sans Code";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/GoogleSansCode-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ======================= primitives ======================= */

  /* accent */
  --accent-50: #F2F6FD;
  --accent-100: #E6ECFB;
  --accent-200: #BFD0F6;
  --accent-600: #0041D9;
  --accent-700: #0036B4;
  --accent-800: #002C91;

  /* greys; 400 is for disabled text and icons only, never body text */
  --grey-0: #FFFFFF;
  --grey-25: #FAFAFA;
  --grey-50: #F5F5F5;
  --grey-75: #F2F2F2;
  --grey-100: #EFEFEF;
  --grey-150: #E7E7E7;
  --grey-400: #8A8B8C;
  --grey-500: #6E6F70;
  --grey-600: #555555;
  --grey-1000: #000000;

  /* from the mock */
  --green-50: #F2F5E9;
  --green-700: #4F6B22;
  --orange-50: #FCF1EC;
  --orange-band: #F6C8B5;
  --orange-tick: #C87B66;
  --orange-700: #964631;
  --red-50: #FCEEEA;
  --red-500: #C45F43;
  --red-700: #B04A30;
  --red-800: #8F3A24;

  /* hues for the intent and category groups */
  --teal-50: #E8F4F1;
  --teal-700: #1F6150;
  --violet-50: #F1EDFA;
  --violet-700: #5A3E99;
  --sky-50: #EEF4FA;
  --sky-700: #2B5079;
  --sand-50: #F6F2E6;
  --sand-700: #6B5520;
  --plum-50: #F4EEF6;
  --plum-700: #6A3D7A;
  --yellow-100: #FFF0B3;

  /* source brand dots, darkened where needed to reach 3:1 on white */
  --brand-zameen: #00843D;
  --brand-graana: #7A3FBF;
  --brand-olx: #002F34;
  --brand-lamudi: #D9480F;
  --brand-whatsapp: #128C7E;
  --brand-waha: #075E54;
  --brand-facebook: #1877F2;

  /* WhatsApp's own chat colours, for the message preview */
  --whatsapp-canvas: #EFEAE2;
  --whatsapp-out: #D9FDD3;
  --whatsapp-ink: #111B21;
  --whatsapp-meta: #54656F;

  /* type scale, px */
  --font-12: 12px;
  --font-13: 13px;
  --font-14: 14px;
  --font-15: 15px;
  --font-16: 16px;
  --font-17: 17px;
  --font-20: 20px;
  --font-25: 25px;
  --font-28: 28px;

  /* space scale, px */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  /* ======================= semantic ======================= */

  /* type */
  --font-sans: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Google Sans Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;
  --tracking-amount: -0.01em;

  /* text */
  --text-primary: var(--grey-1000);
  --text-secondary: var(--grey-600);
  --text-muted: var(--grey-500);
  --text-disabled: var(--grey-400);
  --text-link: var(--accent-600);
  --text-on-accent: var(--grey-0);
  --text-success: var(--green-700);
  --text-warning: var(--orange-700);
  --text-danger: var(--red-700);

  /* surface */
  --surface-page: var(--grey-25);
  --surface-card: var(--grey-0);
  --surface-subtle: var(--grey-50);
  --surface-hover: var(--grey-75);
  --surface-pressed: var(--grey-100);
  --surface-input: var(--grey-0);
  --surface-selected: var(--accent-50);
  --surface-accent: var(--accent-600);
  --surface-accent-hover: var(--accent-700);
  --surface-accent-pressed: var(--accent-800);
  --surface-danger: var(--red-700);
  --surface-danger-hover: var(--red-800);
  --surface-scrim: rgba(0, 0, 0, 0.32);

  /* border */
  --border-subtle: var(--grey-100);
  --border-default: var(--grey-150);
  --border-control: var(--grey-500);
  --border-selected: var(--accent-200);
  --border-focus: var(--accent-600);

  /* icon */
  --icon-default: var(--grey-600);
  --icon-muted: var(--grey-400);
  --icon-accent: var(--accent-600);
  --icon-danger: var(--red-500);

  /* status: one bg + fg pair per tone */
  --status-success-bg: var(--green-50);
  --status-success-fg: var(--green-700);
  --status-warning-bg: var(--orange-50);
  --status-warning-fg: var(--orange-700);
  --status-danger-bg: var(--red-50);
  --status-danger-fg: var(--red-700);
  --status-info-bg: var(--accent-50);
  --status-info-fg: var(--accent-700);
  --status-neutral-bg: var(--grey-75);
  --status-neutral-fg: var(--grey-600);
  /* the warning band: dark text only, never --status-warning-fg */
  --status-band-bg: var(--orange-band);
  --status-band-fg: var(--grey-1000);

  /* intent */
  --intent-sell-bg: var(--accent-100);
  --intent-sell-fg: var(--accent-800);
  --intent-buy-bg: var(--teal-50);
  --intent-buy-fg: var(--teal-700);
  --intent-rent-bg: var(--violet-50);
  --intent-rent-fg: var(--violet-700);

  /* category */
  --category-home-bg: var(--sky-50);
  --category-home-fg: var(--sky-700);
  --category-plot-bg: var(--sand-50);
  --category-plot-fg: var(--sand-700);
  --category-commercial-bg: var(--plum-50);
  --category-commercial-fg: var(--plum-700);

  /* source dot */
  --source-zameen: var(--brand-zameen);
  --source-graana: var(--brand-graana);
  --source-olx: var(--brand-olx);
  --source-lamudi: var(--brand-lamudi);
  --source-whatsapp: var(--brand-whatsapp);
  --source-waha: var(--brand-waha);
  --source-facebook: var(--brand-facebook);
  --source-manual: var(--grey-500);
  --source-app: var(--accent-600);

  /* env label: which database this admin is pointed at */
  --env-prod-bg: var(--red-700);
  --env-prod-fg: var(--grey-0);
  --env-staging-bg: var(--orange-band);
  --env-staging-fg: var(--grey-1000);
  --env-dev-bg: var(--accent-100);
  --env-dev-fg: var(--accent-800);

  /* scale: a price against a budget */
  --scale-track: var(--grey-75);
  --scale-within: var(--green-50);
  --scale-over: var(--orange-band);
  --scale-tick: var(--orange-tick);
  --scale-marker: var(--accent-600);

  /* SLA: how long something has waited */
  --sla-ok: var(--green-700);
  --sla-warn: var(--orange-700);
  --sla-late: var(--red-700);

  /* WhatsApp bubble */
  --bubble-canvas: var(--whatsapp-canvas);
  --bubble-in-bg: var(--grey-0);
  --bubble-out-bg: var(--whatsapp-out);
  --bubble-fg: var(--whatsapp-ink);
  --bubble-meta: var(--whatsapp-meta);

  /* evidence highlight: the span of a raw post a field was read from */
  --evidence-bg: var(--yellow-100);
  --evidence-fg: var(--grey-1000);

  /* radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* sizes */
  --sidebar-width: 246px;
  --info-panel-width: 345px;
  --action-bar-height: 72px;
  --control-height: 40px;
  --control-height-sm: 32px;
  --input-height: 44px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --stroke-icon: 2;
  --dot-size: 8px;
  --avatar-size: 32px;
  --toggle-width: 36px;
  --toggle-height: 20px;
  --toggle-knob: 16px;
  --check-size: 18px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --content-max: 1200px;
  --login-width: 380px;
  --dialog-width: 520px;
  --toast-width: 360px;
  --popover-max-height: 320px;
  --raw-post-max-height: 360px;
  --chat-log-max-height: 60dvh;
  --scale-height: 12px;
  --progress-height: 8px;
  --timeline-dot: 10px;
  --full: 100%;
  --pct-half: 50%;
  --viewport-height: 100dvh;

  /* elevation: one popover shadow (popovers, dialogs, toasts) */
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);

  /* z levels */
  --z-sticky: 10;
  --z-scrim: 15;
  --z-sidebar: 20;
  --z-popover: 30;
  --z-toast: 50;

  /* motion */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --motion-instant: 0.01ms;
  --toast-dwell: 6s;
  --skeleton-cycle: 1.2s;
  --motion-spin: 0.8s;
  --turn: 1turn;
  --turn-quarter: 0.25turn;
  --opacity-disabled: 0.55;
  --opacity-hidden: 0;
  --opacity-skeleton: 0.6;

  /* ======================= layout (changes at the breakpoints) ======================= */

  --shell-columns: var(--sidebar-width) minmax(0, 1fr);
  --shell-sidebar-position: sticky;
  --shell-sidebar-shift: 0px;
  --shell-menu-display: none;
  --split-columns: minmax(0, 1fr) var(--info-panel-width);
  --drawer-order: 0;
  --split-start-columns: var(--info-panel-width) minmax(0, 1fr);
  --split-start-main-order: 0;
  --page-gutter: var(--space-32);
  --grid-min: 280px;
  --grid-two-min: 420px;
  --table-cell-pad: var(--space-12);
  --table-col-wide: 220px;
  --action-bar-direction: row;
}

/* Below 1100: the sidebar becomes a drawer, the info panel drops under the content
   (a drawer's panel rises above it instead: it is what was just opened). */
@media (max-width: 1099.98px) {
  :root {
    --shell-columns: minmax(0, 1fr);
    --shell-sidebar-position: fixed;
    --shell-sidebar-shift: calc(-1 * var(--sidebar-width));
    --shell-menu-display: inline-flex;
    --split-columns: minmax(0, 1fr);
    --drawer-order: -1;
    --split-start-columns: minmax(0, 1fr);
    --split-start-main-order: -1;
    --page-gutter: var(--space-24);
  }
}

/* Below 760: phone. Tighter gutters, one column of cards, stacked action bar. */
@media (max-width: 759.98px) {
  :root {
    --page-gutter: var(--space-16);
    --grid-min: 100%;
    --table-cell-pad: var(--space-8);
    --action-bar-direction: column;
  }
}