/*
 * Design-system · tokens (v2 · Master V4 authority)
 * Extracted from TEVUR Master V4 · Deep Functional Map
 *   path: tevur-saas-master-v4-fixed/Nueva carpeta/index.html
 *   sha256: cd2efcfb1e75955ebf5a…
 * Authority chosen by Julio 2026-07-30 over the consolidated blueprint (sha256 0ff30165…).
 * Do NOT tune values here without updating CANONICAL_DESIGN_TOKENS.json first.
 *
 * NAMING:
 *   Primary names follow V4 verbatim (--bg, --surface, --orange, --sidebar…).
 *   Legacy aliases (--color-*, --sidebar-width, --topbar-height, --fs-*, --radius-xs..--radius-xl, --sp-*)
 *   remain in the second block so nothing built during M0 breaks.
 */

:root {
  /* ── V4 authoritative palette ─────────────────────────── */
  --bg: #fcfbf8;
  --surface: #ffffff;
  --surface-2: #f7f4ef;
  --surface-3: #fff8f1;

  --text: #11110f;
  --text-2: #615c56;
  --muted: #928b82;

  --line: #e8e2db;
  --line-2: #d9d0c6;

  --black: #090909;
  --graphite: #171717;

  --orange: #ff4d00;
  --orange-2: #ff7a33;
  --orange-soft: #fff0e7;

  --green: #24945a;
  --green-soft: #eaf7ef;

  --amber: #d78916;
  --amber-soft: #fff5df;
  /* Amber-strong = darkened variant for warning text on canvas.
     WCAG-AA safe on --bg (#fcfbf8): contrast ~ 5.5:1. Use --amber only for icons/backgrounds. */
  --amber-strong: #7a4b0c;

  --red: #d64545;
  --red-soft: #fdecec;
  /* Red-strong = darkened for danger text on canvas. */
  --red-strong: #a12b2b;

  --purple: #6d63d9;
  --purple-soft: #f0edff;

  /* Shadows (V4 lighter set) */
  --shadow: 0 16px 46px rgba(31,24,18,.08);
  --shadow-sm: 0 7px 24px rgba(31,24,18,.055);

  /* Layout */
  --sidebar: 246px;
  --sidebar-rail: 76px;
  --topbar: 74px;

  /* Density (overridden by viewport bands in responsive-hardening / shell) */
  --density-gap: 15px;
  --density-pad: 17px;
  --page-pad-x: 24px;
  --page-pad-y: 24px;

  /* Breakpoint reference tokens (for JS / docs — media queries use literals) */
  --bp-mobile: 620px;
  --bp-tablet: 900px;
  --bp-notebook: 1279px;
  --bp-desktop: 1280px;
  --bp-wide: 1600px;

  /* Semantic radius (V4) */
  --radius: 18px;
  --radius-sm: 12px;

  /* Focus ring — brand orange with 55% alpha */
  --focus-ring-color: rgba(255,77,0,.55);

  /* ── Typography (kept from M0 seed; V4 uses same families) ── */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Raleway, Inter, sans-serif;
  --font-serif: "Cormorant Garamond", serif;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 36px;
  --fs-display: 48px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ── Spacing (4-based, kept from M0 seed) ─────────────── */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* ── Motion + z-index (kept from M0 seed) ─────────────── */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-emphasis: cubic-bezier(.16,1,.3,1);

  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 10;
  --z-sidebar: 80;
  --z-drawer: 90;
  --z-modal: 100;
  --z-toast: 110;

  /* ── Legacy aliases (M0 seed used these names) ────────── */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-warm: var(--surface-3);
  --color-black: var(--black);
  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-text-on-orange: #ffffff;
  --color-text-on-black: var(--surface-2);
  --color-line: var(--line);
  --color-brand-orange: var(--orange);
  --color-brand-orange-light: var(--orange-2);
  --color-success: var(--green);
  --color-warning: var(--amber);
  --color-danger:  var(--red);
  --color-warning-text: var(--amber-strong);
  --color-danger-text:  var(--red-strong);

  --sidebar-width: var(--sidebar);
  --sidebar-width-mobile: 240px;
  --topbar-height: var(--topbar);

  --radius-xs: 10px;
  --radius-sm-legacy: 12px;
  --radius-md: 14px;
  --radius-lg: var(--radius);
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --shadow-md: 0 10px 30px rgba(31,24,18,.075);
  --shadow-lg: var(--shadow);
}

/* Notebook: icon rail frees ~170px for content without waiting for drawer mode */
@media (min-width: 901px) and (max-width: 1439px) {
  :root {
    --sidebar: var(--sidebar-rail);
    --density-gap: 12px;
    --density-pad: 14px;
    --page-pad-x: 18px;
    --page-pad-y: 18px;
  }
  html[data-sidebar-expanded="true"] {
    --sidebar: 246px;
  }
}

@media (max-width: 900px) {
  :root {
    --sidebar: var(--sidebar-width-mobile);
    --density-gap: 10px;
    --density-pad: 12px;
    --page-pad-x: 16px;
    --page-pad-y: 20px;
  }
}