/* Showroom Gestión — site brand tokens
   Direction: warm paper + ink green + butter. Playful retail, not generic SaaS.
   Type: Bricolage Grotesque (display) / Archivo (body, inherited from product) /
   IBM Plex Mono (labels, ledger, product chrome). */

:root {
  /* ---- raw color ---- */
  --paper-0: #FBF8EF;
  --paper-1: #F4EFE1;
  --paper-2: #ECE5D3;
  --white-warm: #FFFDF6;

  --ink-0: #17231D;
  --ink-1: #3F4A43;
  --ink-2: #5C675F;
  --ink-3: #8A948C;

  --line-1: #DCD4C0;
  --line-2: #C4B99F;

  --green-1: #1F6B57;
  --green-2: #164C3F;
  --green-3: #7FB8A5;
  --green-soft: #E3EEE7;

  --butter-1: #F2C75C;
  --butter-2: #E4B63F;
  --butter-soft: #FAEBC2;

  --tomato-1: #C34832;
  --tomato-soft: #F7E1DB;

  --night-0: #12201A;
  --night-1: #1B2D25;
  --night-2: #263B31;
  --night-text: #F4EFE2;
  --night-muted: #A9B6AD;
  --night-line: #33483D;

  /* ---- semantic color ---- */
  --surface-page: var(--paper-0);
  --surface-raised: var(--white-warm);
  --surface-sunken: var(--paper-1);
  --surface-special: var(--butter-1);
  --surface-inverse: var(--night-0);

  --text-primary: var(--ink-0);
  --text-secondary: var(--ink-1);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-3);
  --text-on-accent: var(--white-warm);
  --text-on-special: var(--ink-0);
  --text-on-inverse: var(--night-text);
  --text-on-inverse-muted: var(--night-muted);

  --accent: var(--green-1);
  --accent-hover: var(--green-2);
  --accent-soft: var(--green-soft);
  --accent-highlight: var(--butter-1);

  --border-subtle: var(--line-1);
  --border-strong: var(--line-2);
  --border-inverse: var(--night-line);

  --state-success: var(--green-1);
  --state-success-soft: var(--green-soft);
  --state-warning: #8A6100;
  --state-warning-soft: var(--butter-soft);
  --state-danger: var(--tomato-1);
  --state-danger-soft: var(--tomato-soft);

  /* ---- type families ---- */
  --font-display: "Bricolage Grotesque", "Archivo", ui-sans-serif, sans-serif;
  --font-body: "Archivo", "IBM Plex Sans", ui-sans-serif, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- type scale (fluid) ---- */
  --type-display: clamp(3.1rem, 7.6vw, 6.6rem);
  --type-h1: clamp(2.6rem, 5.6vw, 4.8rem);
  --type-h2: clamp(2.1rem, 4.2vw, 3.6rem);
  --type-h3: clamp(1.45rem, 2.4vw, 2rem);
  --type-h4: 1.25rem;
  --type-lead: clamp(1.15rem, 1.7vw, 1.4rem);
  --type-body: 1.0625rem;
  --type-body-sm: 0.9375rem;
  --type-caption: 0.8125rem;
  --type-micro: 0.75rem;

  /* ---- weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---- line heights & tracking ---- */
  --leading-display: 0.93;
  --leading-heading: 1.04;
  --leading-body: 1.55;
  --leading-tight: 1.25;
  --tracking-display: -0.045em;
  --tracking-heading: -0.03em;
  --tracking-label: 0.09em;

  /* ---- spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;
  --space-10: 120px;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(72px, 9vw, 124px);

  /* ---- radii ---- */
  --radius-ticket: 2px;
  --radius-input: 8px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-chat: 14px;

  /* ---- borders & shadows ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;
  --shadow-offset: 4px 4px 0 var(--ink-0);
  --shadow-offset-sm: 3px 3px 0 var(--ink-0);
  --shadow-soft: 0 30px 70px -38px rgba(23, 35, 29, 0.45);
  --shadow-panel: 0 2px 0 rgba(23, 35, 29, 0.06), 0 34px 80px -46px rgba(23, 35, 29, 0.55);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.22, 0.8, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --marquee-duration: 34s;

  /* ---- layout ---- */
  --nav-height: 72px;
  --browser-bar-height: 34px;
}

/* Inverse scope for the audit band and other dark moments. */
[data-theme="night"] {
  --surface-page: var(--night-0);
  --surface-raised: var(--night-1);
  --surface-sunken: var(--night-2);
  --text-primary: var(--night-text);
  --text-secondary: #D8DFD8;
  --text-muted: var(--night-muted);
  --text-faint: #7E8D83;
  --border-subtle: var(--night-line);
  --border-strong: #47604F;
  --accent: var(--green-3);
  --accent-hover: #A4D4C3;
  --accent-soft: var(--night-2);
  --accent-highlight: var(--butter-1);
  --shadow-offset: 4px 4px 0 var(--night-0);
  --shadow-offset-sm: 3px 3px 0 var(--night-0);
}

/* Type roles */
.type-display {
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.type-h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.type-h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.type-h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.type-lead {
  font-family: var(--font-body);
  font-size: var(--type-lead);
  line-height: 1.45;
  color: var(--text-secondary);
}

.type-body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.type-label {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.type-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --marquee-duration: 0ms;
  }
}