/* ═══════════════════════════════════════════════════════════════
   LoginStack — Colors & Type
   Lifted directly from apps/dashboard-web/src/app/styles.css.
   The product describes itself as "Premium, minimal, Apple-inspired".
   ═══════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ─── Surface / neutrals ───────────────────────── */
  --ls-bg:               #f5f5f7;   /* App background — warm light gray */
  --ls-surface:          #ffffff;   /* Cards, sidebars, modals */
  --ls-surface-hover:    #fafafa;
  --ls-text:             #1d1d1f;   /* Primary text — near-black */
  --ls-text-secondary:   #86868b;
  --ls-text-tertiary:    #aeaeb2;
  --ls-border:           #e8e8ed;
  --ls-border-light:     #f0f0f5;

  /* ─── Brand / accent (Apple-blue) ──────────────── */
  --ls-accent:           #0071e3;
  --ls-accent-hover:     #0077ed;
  --ls-accent-soft:      #e8f4fd;

  /* Indigo is used for `master_admin` badges, the user avatar
     gradient end stop, the analytics chart gradient, and the
     login icon gradient. It is a SECONDARY accent, never primary. */
  --ls-indigo:           #6366f1;
  --ls-indigo-soft:      #f0eeff;

  /* ─── Semantic ─────────────────────────────────── */
  --ls-success:          #34c759;
  --ls-success-soft:     #e8f8ed;
  --ls-success-text:     #1a7a34;   /* "1a7a34" used on success messages */
  --ls-warning:          #ff9f0a;
  --ls-warning-soft:     #fff4e0;
  --ls-warning-text:     #8a6200;
  --ls-danger:           #ff3b30;
  --ls-danger-soft:      #ffe5e4;

  /* macOS window-control dots (used in portal preview frame) */
  --ls-mac-red:          #ff5f57;
  --ls-mac-yellow:       #febc2e;
  --ls-mac-green:        #28c840;

  /* ─── Type ─────────────────────────────────────── */
  /* Primary stack: SF Pro on Apple devices, Inter as the cross-
     platform fallback (closest match on Google Fonts). */
  --ls-font:             -apple-system, BlinkMacSystemFont, "SF Pro Display",
                         "SF Pro Text", "Inter", "Helvetica Neue",
                         system-ui, sans-serif;
  --ls-font-mono:        "SF Mono", ui-monospace, Menlo, Monaco,
                         "Cascadia Mono", Consolas, monospace;

  --ls-fs-xs:            0.6875rem;   /* 11 — caps labels, helper */
  --ls-fs-sm:            0.8125rem;   /* 13 — table cells, captions */
  --ls-fs-base:          0.875rem;    /* 14 — default body */
  --ls-fs-lg:            1rem;        /* 16 — card titles */
  --ls-fs-xl:            1.125rem;    /* 18 — section headings */
  --ls-fs-2xl:           1.375rem;    /* 22 — page subheaders */
  --ls-fs-3xl:           1.75rem;     /* 28 — page title */
  --ls-fs-4xl:           2.25rem;     /* 36 — stat numbers */

  --ls-fw-normal:        400;
  --ls-fw-medium:        500;
  --ls-fw-semibold:      600;
  --ls-fw-bold:          700;

  --ls-lh-tight:         1.2;
  --ls-lh-normal:        1.5;
  --ls-ls-tight:         -0.022em;    /* large display text */
  --ls-ls-normal:        -0.01em;
  --ls-ls-caps:          0.06em;      /* uppercase eyebrow labels */

  /* ─── Spacing (8px base, with 4px half-step) ───── */
  --ls-space-1:  0.25rem;   /* 4  */
  --ls-space-2:  0.5rem;    /* 8  */
  --ls-space-3:  0.75rem;   /* 12 */
  --ls-space-4:  1rem;      /* 16 */
  --ls-space-5:  1.25rem;   /* 20 */
  --ls-space-6:  1.5rem;    /* 24 */
  --ls-space-8:  2rem;      /* 32 */
  --ls-space-10: 2.5rem;    /* 40 */
  --ls-space-12: 3rem;      /* 48 */
  --ls-space-16: 4rem;      /* 64 */
  --ls-space-20: 5rem;      /* 80 */

  /* ─── Radius ──────────────────────────────────── */
  --ls-radius-sm:   8px;    /* buttons, inputs, tags */
  --ls-radius-md:   12px;   /* sub-cards, chips */
  --ls-radius-lg:   16px;   /* primary cards */
  --ls-radius-xl:   20px;   /* portal preview frame, login card */
  --ls-radius-full: 9999px; /* pills, dots, avatars */

  /* ─── Shadows (extremely subtle, layered) ─────── */
  --ls-shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
  --ls-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --ls-shadow-md: 0 4px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03);
  --ls-shadow-lg: 0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03);
  --ls-shadow-xl: 0 16px 48px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);

  /* ─── Motion ──────────────────────────────────── */
  --ls-ease:           cubic-bezier(0.25, 0.1, 0.25, 1);
  --ls-dur-fast:       150ms;
  --ls-dur-normal:     200ms;
  --ls-dur-slow:       300ms;

  /* ─── Layout ──────────────────────────────────── */
  --ls-sidebar-width:           260px;
  --ls-sidebar-collapsed-width: 72px;
}

/* ───────────────────────────────────────────────────
   Semantic type roles — base elements styled as the
   product styles them. Use these as a fast cheatsheet
   when prototyping LoginStack screens.
   ─────────────────────────────────────────────────── */

.ls-page-title {
  font-size: var(--ls-fs-3xl);
  font-weight: var(--ls-fw-bold);
  letter-spacing: var(--ls-ls-tight);
  line-height: var(--ls-lh-tight);
  color: var(--ls-text);
}

.ls-page-subtitle {
  font-size: var(--ls-fs-lg);
  color: var(--ls-text-secondary);
  font-weight: var(--ls-fw-normal);
}

.ls-section-title {
  font-size: var(--ls-fs-lg);
  font-weight: var(--ls-fw-semibold);
  color: var(--ls-text);
}

.ls-card-title {
  font-size: var(--ls-fs-lg);
  font-weight: var(--ls-fw-semibold);
  color: var(--ls-text);
}

.ls-stat-number {
  font-size: var(--ls-fs-4xl);
  font-weight: var(--ls-fw-bold);
  letter-spacing: var(--ls-ls-tight);
  line-height: 1;
  color: var(--ls-text);
}

.ls-eyebrow {
  font-size: var(--ls-fs-xs);
  font-weight: var(--ls-fw-semibold);
  color: var(--ls-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--ls-ls-caps);
}

.ls-body {
  font-size: var(--ls-fs-base);
  line-height: var(--ls-lh-normal);
  letter-spacing: var(--ls-ls-normal);
  color: var(--ls-text);
}

.ls-helper {
  font-size: var(--ls-fs-xs);
  color: var(--ls-text-tertiary);
}

.ls-mono {
  font-family: var(--ls-font-mono);
  font-size: var(--ls-fs-sm);
}