/* =========================================================================
   LANDLORDSPACES DESIGN TOKENS (phase 367)  -  the ONE source of brand values.
   Loaded first on every page: public site, homepage, Super Admin, every user
   portal, auth pages, referral and partnership pages.
   Brand colours come from the official logo (public/bimi/landlordspaces.svg):
     teal  #0f766e   (logo tile)        golden-yellow #f59e0b  (logo dot)
   Nothing else in the project may define its own brand colour. Skins for admin
   and portals only MAP onto these tokens (see admin2.css, portal.css).
   ========================================================================= */
:root{
  /* ---- brand ---- */
  --ls-brand:#0f766e;            /* PRIMARY: official teal (buttons, links, active) */
  --ls-brand-hover:#0b5953;      /* SECONDARY deep green: hover / pressed / headings on tint */
  --ls-brand-deep:#08403c;       /* darkest brand green: footer, dark surfaces */
  --ls-brand-tint:#e6f4f2;       /* 8% tint: selected rows, soft badges */
  --ls-brand-tint-2:#d7ebe8;     /* stronger tint: borders on tint */
  --ls-accent:#f59e0b;           /* ACCENT: golden-yellow from the logo (use sparingly) */
  --ls-accent-hover:#d97706;
  --ls-accent-ink:#92400e;       /* readable amber text on white / tint */
  --ls-accent-tint:#fef3c7;
  --ls-on-brand:#ffffff;         /* text on brand teal */
  --ls-on-accent:#1f1300;        /* text on golden accent */
  --ls-on-danger:#ffffff;

  /* ---- surfaces ---- */
  --ls-page:#ffffff;             /* DEFAULT page background: white */
  --ls-surface:#ffffff;          /* cards, panels, modals, tables, inputs */
  --ls-surface-alt:#f6f8f8;      /* very light neutral grey, for separating sections only */
  --ls-surface-sunken:#eef2f2;

  /* ---- text ---- */
  --ls-text:#0f172a;             /* primary: near-black charcoal */
  --ls-text-2:#334155;           /* secondary body */
  --ls-text-muted:#5a6a80;       /* neutral grey, 5.4:1 on white */
  --ls-placeholder:#586879;      /* 5.7:1 on white, 5.1:1 on light grey */
  --ls-border:#e2e8ee;           /* subtle light grey */
  --ls-border-strong:#cbd5df;

  /* ---- semantic (statuses only, AA with their own tints) ---- */
  --ls-success:#15803d;  --ls-success-tint:#dcfce7;
  --ls-warning:#b45309;  --ls-warning-tint:#fef3c7;
  --ls-danger:#b91c1c;   --ls-danger-tint:#fee2e2;
  --ls-info:#0f766e;     --ls-info-tint:#e6f4f2;

  /* ---- shape & depth ---- */
  --ls-r-xs:6px; --ls-r-sm:9px; --ls-r:14px; --ls-r-lg:18px; --ls-r-pill:999px;
  --ls-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --ls-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06);
  --ls-shadow-lg:0 12px 40px rgba(15,23,42,.16);
  --ls-focus:0 0 0 3px rgba(15,118,110,.28);

  /* ---- type ---- */
  --ls-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ls-head:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --ls-fs-xs:.75rem; --ls-fs-sm:.875rem; --ls-fs:.9375rem; --ls-fs-lg:1.0625rem;
  --ls-h1:clamp(1.6rem,2.4vw + 1rem,2.25rem); --ls-h2:clamp(1.3rem,1.4vw + 1rem,1.65rem); --ls-h3:1.15rem; --ls-h4:1rem;
  --ls-lh:1.55; --ls-lh-tight:1.25;
  --ls-fw:400; --ls-fw-m:500; --ls-fw-sb:600; --ls-fw-b:700; --ls-fw-xb:800;

  /* ---- space, icon, controls ---- */
  --ls-sp-1:4px; --ls-sp-2:8px; --ls-sp-3:12px; --ls-sp-4:16px; --ls-sp-5:24px; --ls-sp-6:32px;
  --ls-icon:20px; --ls-icon-sm:16px; --ls-icon-lg:24px; --ls-stroke:1.8;
  --ls-ctl-h:42px; --ls-ctl-h-sm:34px;

  /* =====================================================================
     LEGACY NAMES. Existing stylesheets use these; they now all resolve to
     the tokens above, so changing a token changes the whole platform.
     ===================================================================== */
  --brand:var(--ls-brand); --brand-d:var(--ls-brand-hover); --brand-l:var(--ls-brand-tint);
  --accent:var(--ls-accent); --accent-d:var(--ls-accent-hover);
  --primary:var(--ls-brand); --secondary:var(--ls-brand-hover);
  --ink:var(--ls-text); --ink-2:var(--ls-text-2); --muted:var(--ls-text-muted);
  --line:var(--ls-border); --bg:var(--ls-surface-alt); --card:var(--ls-surface); --page:var(--ls-page);
  --surface:var(--ls-surface); --text:var(--ls-text); --text-muted:var(--ls-text-muted); --border:var(--ls-border);
  --danger:var(--ls-danger); --ok:var(--ls-success); --warn:var(--ls-warning); --info:var(--ls-info);
  --success:var(--ls-success); --warning:var(--ls-warning); --error:var(--ls-danger);
  --verified:var(--ls-brand); --featured:var(--ls-accent); --premium:var(--ls-brand);
  --r:var(--ls-r); --r-sm:var(--ls-r-sm); --shadow:var(--ls-shadow); --shadow-lg:var(--ls-shadow-lg);
  --font:var(--ls-font); --head:var(--ls-head); --on-brand:var(--ls-on-brand);
  color-scheme:light;
}

/* ---- Optional dark mode (a user choice, never the default). One palette for
        the public site, admin and portals: neutral charcoal + the same teal. ---- */
:root[data-theme="dark"]{
  --ls-brand:#2dd4bf; --ls-brand-hover:#5eead4; --ls-brand-tint:rgba(45,212,191,.13); --ls-brand-tint-2:rgba(45,212,191,.24);
  --ls-on-brand:#04201c; --ls-on-danger:#2a0707; --ls-accent:#fbbf24; --ls-accent-hover:#f59e0b; --ls-accent-ink:#fcd34d; --ls-accent-tint:rgba(251,191,36,.14);
  --ls-page:#0c1416; --ls-surface:#121c1f; --ls-surface-alt:#0f181a; --ls-surface-sunken:#0a1113;
  --ls-text:#e8eef1; --ls-text-2:#c5d0d6; --ls-text-muted:#98a8b0; --ls-placeholder:#7d8d96;
  --ls-border:#223238; --ls-border-strong:#33474f;
  --ls-success:#4ade80; --ls-success-tint:rgba(74,222,128,.14); --ls-warning:#fbbf24; --ls-warning-tint:rgba(251,191,36,.14);
  --ls-danger:#f87171; --ls-danger-tint:rgba(248,113,113,.14); --ls-info:#2dd4bf; --ls-info-tint:rgba(45,212,191,.13);
  --ls-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --ls-shadow-lg:0 12px 40px rgba(0,0,0,.6);
  --ls-focus:0 0 0 3px rgba(45,212,191,.35);
  color-scheme:dark;
}