/* ══════════════════════════════════════════════════════════════════════════
   Nocturne tokens — design-system source of truth (ADR-003).
   Every color, size, spacing, radius, shadow, duration and z-index consumed
   by site.css comes from a custom property defined here. This file is the
   single place where literal colors and pixel values are allowed
   (see .stylelintrc.json overrides for "src/MonoKromatik.Web/wwwroot/css/tokens.css").
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* — base surfaces and text (Nocturne palette, ADR-003) — */
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  /* — neutral ramp (source of truth for the monochrome palette) — */
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  /* — accent ramp equals the neutral ramp: the platform is monochrome, the
     "accent" is only ever a lighter neutral used with restraint (ADR-003) — */
  --color-accent-100: var(--color-neutral-100);
  --color-accent-200: var(--color-neutral-200);
  --color-accent-300: var(--color-neutral-300);
  --color-accent-400: var(--color-neutral-400);
  --color-accent-500: var(--color-neutral-500);
  --color-accent-600: var(--color-neutral-600);
  --color-accent-700: var(--color-neutral-700);
  --color-accent-800: var(--color-neutral-800);
  --color-accent-900: var(--color-neutral-900);
  --color-accent: var(--color-neutral-300);

  /* — the one "action" color (ADR-003): the fill of the floating WhatsApp
     button and the text on it. Same light pill as before in the default
     design; every site palette redefines both with its own tone — */
  --color-action: var(--color-neutral-100);
  --color-on-action: var(--color-neutral-900);

  /* — focus indicator: a neutral light tone, never removed without
     replacement (UX-ACC-004) — */
  --color-focus: var(--color-neutral-200);

  /* — feedback colors: four low-chroma tones, each with a light -300 text
     tone and a dark -800 background tone that fits the Nocturne ground — */
  --color-success-300: #b8d8c4;
  --color-success-800: #1e3227;
  --color-warning-300: #e2d0a3;
  --color-warning-800: #392f19;
  --color-danger-300: #e3b6b6;
  --color-danger-800: #3a2020;
  --color-info-300: #b8c9de;
  --color-info-800: #1f2b3a;

  /* — spacing scale: base 4px (0.25rem), --space-1..--space-16 — */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-13: 3.25rem;
  --space-14: 3.5rem;
  --space-15: 3.75rem;
  --space-16: 4rem;

  /* — type scale: 12/14/16/18/20/24/32/40 px expressed in rem — */
  --font-size-100: 0.75rem;
  --font-size-200: 0.875rem;
  --font-size-300: 1rem;
  --font-size-400: 1.125rem;
  --font-size-500: 1.25rem;
  --font-size-600: 1.5rem;
  --font-size-700: 2rem;
  --font-size-800: 2.5rem;
  --font-heading: Inter, system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: Inter, system-ui, sans-serif;

  /* — radii — */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* — elevation: hairline edge + ambient darkness, dark-theme shadows — */
  --shadow-sm: 0 0 0 1px var(--color-neutral-800);
  --shadow-md: 0 0 0 1px var(--color-neutral-700), 0 6px 18px rgb(0 0 0 / 55%);
  --shadow-lg: 0 0 0 1px var(--color-neutral-500), 0 16px 40px rgb(0 0 0 / 65%);

  /* — motion — */
  --duration-fast: 150ms;
  --duration-base: 250ms;

  /* — stacking order — */
  --z-header: 40;
  --z-tab-bar: 46;
  --z-float: 45;
  --z-dialog: 70;
  --z-toast: 80;

  /* — touch targets (documented in rem so no bare px is needed outside
     border/outline/box-shadow/media-query contexts) — */
  --size-touch-sm: 2.75rem; /* 44px */
  --size-touch-md: 3rem; /* 48px */
  --size-touch-lg: 3.5rem; /* 56px */

  /* — containers — */
  --container-public: 75rem;
  --container-panel: 73.75rem;
  --container-panel-wide: 90rem;

  /* — hairlines and chrome blur — */
  --hairline: 0.0625rem;
  --blur-chrome: 0.875rem;

  /* — text tone helpers (derived from --color-text / the neutral ramp) — */

  /* Was a color-mix(in srgb, var(--color-text) 55%, transparent) — a flatter, dimmer gray than
     the prototype's own color for this exact role (contacto.dc.html's "(opcional)" marker uses
     --color-neutral-500 directly). Aligning with the neutral ramp keeps --color-text-muted one
     step dimmer than --color-text-subtle below, consistent with the ramp's own ordering, instead
     of an ad-hoc alpha blend (found comparing Contacto against the prototype, US-014). */
  --color-text-muted: var(--color-neutral-500);
  --color-text-subtle: var(--color-neutral-400);

  /* — fixed-width overlays — */
  --dialog-width: 27.5rem;

  /* Single-column panel forms (520px): wide enough for a sentence, narrow enough
     to keep the eye on one column (RF-PER-001, UX-FRM-002). */
  --form-narrow-width: 32.5rem;
  --error-page-width: 26.25rem;
}