/* MEM Studios / workspace design tokens — v2.0
   Primitives --> semantic roles --> component styles.
   Load after app.css and before mem-theme.css and all other layers.
   This file contains tokens ONLY; it never alters a selector or @font-face.
   Work on the tokens here rather than adding another ad-hoc override.
*/
:root {
  /* ── BRAND / SURFACES ──────────────────────────────────────── */
  --mem-color-bg: #121212;
  --mem-color-sidebar: #141414;
  --mem-color-surface: #191919;
  --mem-color-hover: #1c1c1c;
  --mem-color-selected: #222222;
  --mem-color-paper: #eeeeee;
  --mem-color-text: #eeeeee;
  --mem-color-text-muted: #a8a8a8;
  --mem-color-text-faint: #8c8c8c;
  --mem-color-border: rgba(238, 238, 238, .10);
  --mem-color-border-strong: rgba(238, 238, 238, .22);
  --mem-color-lilac: #b5b5ff;
  --mem-color-lilac-ink: #2b2b55;
  --mem-color-red: #610002;
  --mem-color-red-light: #9b0104;
  --mem-color-red-text: #ffb4ad;
  --mem-color-red-tint: #ffd9d6;
  --mem-color-success: #c6e8b4;
  --mem-color-warning: #f3d58f;
  --mem-accent-gradient: linear-gradient(45deg, var(--mem-color-red-light) 15%, var(--mem-color-lilac));

  /* ── FONT FAMILIES / WEIGHTS ──────────────────────────────── */
  --mem-font-body: Poppins, Arial, sans-serif;
  --mem-font-display: Hubiron, Impact, sans-serif;
  --mem-font-editorial: 'Instrument Serif', Georgia, serif;
  --mem-weight-light: 300;
  --mem-weight-regular: 400;
  --mem-weight-medium: 500;
  --mem-weight-bold: 700;

  /* ── TYPE SCALE ──────────────────────────────────────────── */
  --mem-type-4xs: 0.5625rem; /* extremely compact legacy utility labels */
  --mem-type-3xs: 0.625rem; /* compact overlines and menu labels */
  --mem-type-2xs: 0.6875rem; /* utility, micro labels */
  --mem-type-xs: 0.75rem;  /* labels and meta */
  --mem-type-sm: 0.8125rem;  /* secondary text */
  --mem-type-body: 0.875rem;
  --mem-type-body-lg: 0.9375rem;
  --mem-type-lead: 1rem;
  --mem-type-h6: 1.125rem;
  --mem-type-h5: 1.25rem;
  --mem-type-section: 1.5rem;
  --mem-type-h3: 1.875rem;
  --mem-type-h2: clamp(1.75rem, 3vw, 2.375rem);
  --mem-type-page-title: clamp(2.375rem, 4.2vw, 3.625rem);
  --mem-type-display: clamp(2.75rem, 4.6vw, 4.75rem);
  --mem-leading-tight: 1.05;
  --mem-leading-display: .95;
  --mem-leading-heading: 1.15;
  --mem-leading-body: 1.6;
  --mem-leading-relaxed: 1.7;

  /* ── LETTER SPACING (EM follows font size) ───────────────── */
  --mem-track-display: -.045em;
  --mem-track-tight: -.02em;
  --mem-track-normal: 0;
  --mem-track-subtle: .02em;
  --mem-track-status: .03em;
  --mem-track-label: .06em;
  --mem-track-action: .10em;
  --mem-track-eyebrow: .12em;
  --mem-track-wide: .17em;

  /* ── SPACING / 0.25REM-BASED SCALE ───────────────────────────── */
  --mem-space-0: 0;
  --mem-space-0-5: 0.125rem;
  --mem-space-1: 0.25rem;
  --mem-space-1-5: 0.375rem;
  --mem-space-2: 0.5rem;
  --mem-space-2-5: 0.625rem;
  --mem-space-3: 0.75rem;
  --mem-space-3-5: 0.875rem;
  --mem-space-4: 1rem;
  --mem-space-4-5: 1.125rem;
  --mem-space-5: 1.25rem;
  --mem-space-6: 1.5rem;
  --mem-space-7: 1.75rem;
  --mem-space-8: 2rem;
  --mem-space-10: 2.5rem;
  --mem-space-12: 3rem;
  --mem-space-14: 3.5rem;
  --mem-space-16: 4rem;
  --mem-space-18: 4.5rem;
  --mem-space-20: 5rem;
  --mem-space-24: 6rem;

  /* ── SHAPE / LINES ───────────────────────────────────────── */
  /* Shape primitives: preserve the existing square/editorial character. */
  --mem-radius-none: 0;
  --mem-radius-2xs: 0.125rem; /* 2px-equivalent: skeletons, tiny marks */
  --mem-radius-xs: 0.25rem;  /* 4px-equivalent */
  --mem-radius-sm: 0.375rem; /* 6px-equivalent */
  --mem-radius-md: 0.5rem;  /* 8px-equivalent */
  --mem-radius-lg: 0.75rem;  /* 12px-equivalent */
  --mem-radius-xl: 1rem;     /* 16px-equivalent */
  --mem-radius-2xl: 1.5rem;  /* 24px-equivalent */
  --mem-radius-pill: 999em;  /* scales with the control's text; remains pill-shaped */
  --mem-radius-circle: 50%; /* avatars, circular icon buttons */

  /* Semantic radii: not every card should have rounded corners. */
  --mem-radius-card: var(--mem-radius-none);
  --mem-radius-field: var(--mem-radius-none);
  --mem-radius-button: var(--mem-radius-pill);
  --mem-radius-badge: var(--mem-radius-pill);
  --mem-radius-search: 0.6rem; /* existing search field silhouette */
  --mem-radius-panel: 0.7rem;  /* existing money tiles, detail panels */
  --mem-radius-drawer: var(--mem-radius-lg);
  --mem-radius-dialog: 0.9rem; /* existing search palette */
  --mem-radius-toast: var(--mem-radius-panel);
  --mem-radius-skeleton: var(--mem-radius-2xs);

  /* 1px is intentional for crisp borders regardless of the root text size. */
  --mem-border-hairline: 1px;
  --mem-border-strong: 2px;
  --mem-shadow-float: 0 1.125rem 2.5rem rgba(0, 0, 0, .45);

  /* ── RESPONSIVE LAYOUT / COMPONENT ROLES ─────────────────── */
  --mem-layout-sidebar: 16rem;
  --mem-layout-content-max: 85rem;
  --mem-layout-gutter: clamp(1.25rem, 4vw, 4rem);
  --mem-layout-content-gap: 1.375rem;  /* keep existing page rhythm */
  --mem-layout-section-gap: var(--mem-space-7);
  --mem-layout-page-head-gap: var(--mem-space-16);
  --mem-layout-grid-gap: var(--mem-space-4);
  --mem-layout-field-gap: var(--mem-space-3);
  --mem-layout-form-gap: var(--mem-space-6);
  --mem-layout-invoice-gutter: clamp(1rem, 3vw, 2rem);
  --mem-layout-portal-gutter: clamp(1.25rem, 5vw, 5.625rem);
  --mem-control-height: 2.75rem;
  --mem-control-height-sm: 2.5rem;
  --mem-control-height-xs: 2.25rem;
  --mem-control-padding-x: var(--mem-space-5);
  --mem-card-padding: var(--mem-space-6);
  --mem-card-padding-sm: var(--mem-space-4);
  --mem-dialog-padding: var(--mem-space-6);
  --mem-field-padding-inline: var(--mem-space-4);
  --mem-field-padding-block: var(--mem-space-3);
  --mem-button-padding-inline: var(--mem-space-5);
  /* Inline content scales with its own font-size; ideal for compact badges. */
  --mem-badge-padding-inline: 0.9em;
  --mem-badge-padding-block: 0.35em;
  --mem-inline-icon-gap: 0.5em;
  --mem-icon-size-sm: 1rem;
  --mem-icon-size-md: 1.25rem;
  --mem-icon-size-lg: 1.5rem;
  --mem-status-padding: var(--mem-space-3);

  /* ── MOTION / LAYERS ──────────────────────────────────────── */
  --mem-duration-fast: 120ms;
  --mem-duration-ui: 200ms;
  --mem-duration-medium: 250ms;
  --mem-duration-entrance: 340ms;
  --mem-duration-entrance-long: 430ms;
  --mem-easing-standard: cubic-bezier(.22, 1, .36, 1);
  --mem-easing-linear: linear;
  --mem-z-base: 0;
  --mem-z-dropdown: 30;
  --mem-z-sidebar: 40;
  --mem-z-modal: 100;
  --mem-z-progress: 9999;
}

/* Existing mobile UI intentionally uses a tighter content gutter. */
@media (max-width: 56.25rem) {
  :root { --mem-layout-gutter: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mem-duration-fast: 0ms;
    --mem-duration-ui: 0ms;
    --mem-duration-medium: 0ms;
    --mem-duration-entrance: 0ms;
    --mem-duration-entrance-long: 0ms;
  }
}