/**
 * LASTVEL Design Tokens — CSS Custom Properties
 * Updated 2026-08-11 with scoped customer and staff dashboard tokens.
 */
@import "lastvel-fonts.css";

:root {
  /* Brand colours */
  --lv-color-canvas-light: #ffffff;
  --lv-color-canvas-dark: #273232;
  --lv-color-canvas-espresso: #1c1917;
  --lv-color-accent-gold: #b7944d;
  --lv-color-accent-champagne: #d3b793;

  /* Dashboard-only surfaces — do not replace public-site canvases */
  --lv-dashboard-sidebar: #1c1917;
  --lv-dashboard-workspace: #e3d5be;
  --lv-dashboard-surface: #efe4d0;
  --lv-dashboard-surface-strong: #e8d8bd;
  --lv-dashboard-feature: #273232;
  --lv-dashboard-text: #1c1917;
  --lv-dashboard-text-muted: rgba(28, 25, 23, 0.68);
  --lv-dashboard-text-on-dark: #fffaf1;
  --lv-dashboard-border: rgba(28, 25, 23, 0.14);
  --lv-dashboard-border-strong: rgba(28, 25, 23, 0.24);
  --lv-dashboard-focus: #b7944d;
  --lv-dashboard-shadow: 0 8px 28px rgba(57, 43, 30, 0.08);

  /* Foreground on espresso canvas */
  --lv-color-text-primary: #ffffff;
  --lv-color-text-secondary: rgba(255, 255, 255, 0.72);
  --lv-color-text-muted: rgba(255, 255, 255, 0.55);
  --lv-color-text-on-dark: #ffffff;
  --lv-color-text-muted-on-dark: rgba(255, 255, 255, 0.6);

  /* Foreground on light contained surfaces */
  --lv-color-text-on-light: #1c1917;
  --lv-color-text-muted-on-light: rgba(39, 50, 50, 0.65);

  --lv-color-action-fill: #ffffff;
  --lv-color-action-text: #1c1917;
  --lv-color-action-hover: #f5f2ed;
  --lv-color-border-light: rgba(255, 255, 255, 0.12);
  --lv-color-border-dark: rgba(255, 255, 255, 0.12);
  --lv-color-border-secondary-light: rgba(39, 50, 50, 0.25);
  --lv-color-border-secondary-dark: rgba(255, 255, 255, 0.35);

  --lv-color-surface-champagne: rgba(211, 183, 147, 0.15);
  --lv-color-surface-card: rgba(255, 255, 255, 0.06);
  --lv-color-surface-form: rgba(211, 183, 147, 0.12);
  --lv-color-surface-elevated-dark: rgba(255, 255, 255, 0.06);
  --lv-color-surface-error: rgba(211, 183, 147, 0.35);
  --lv-color-overlay-scrim: rgba(28, 25, 23, 0.88);

  --lv-gradient-veil-top: linear-gradient(
    to bottom,
    rgba(28, 25, 23, 0.65),
    transparent
  );
  --lv-gradient-hero-bottom: linear-gradient(
    to top,
    rgba(28, 25, 23, 0.85) 0%,
    rgba(28, 25, 23, 0.35) 45%,
    transparent 100%
  );
  --lv-gradient-media-bottom: linear-gradient(
    to top,
    rgba(28, 25, 23, 0.75),
    transparent 60%
  );

  /* Typography — English (stakeholder-approved hybrid) */
  --lv-font-editorial-en: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --lv-font-ui-en: "DM Sans", Inter, system-ui, sans-serif;
  --lv-font-wordmark: "Brown Austin", Georgia, serif;

  /* Typography — Persian */
  --lv-font-editorial-fa: IRANMarker, Tahoma, system-ui, sans-serif;
  --lv-font-ui-fa: IRANMarker, Tahoma, system-ui, sans-serif;
  --lv-font-ghalam-fa: "Mj Ghalam", Tahoma, system-ui, sans-serif;
  --lv-font-marker-fa: IRANMarker, Tahoma, system-ui, sans-serif;

  /* Active stacks */
  --lv-font-editorial: var(--lv-font-editorial-en);
  --lv-font-ui: var(--lv-font-ui-en);

  --lv-text-hero: clamp(2.75rem, 5.5vw, 3.75rem);
  --lv-text-section: clamp(2rem, 4vw, 3.25rem);
  --lv-text-gateway-intro: clamp(1.75rem, 3.5vw, 2.75rem);
  --lv-text-journey: clamp(1.75rem, 4vw, 3rem);
  --lv-text-body: 16px;
  --lv-text-body-lg: 20px;
  --lv-text-eyebrow: 11px;
  --lv-text-nav: 14px;
  --lv-text-footer-display: clamp(3rem, 12vw, 8rem);

  --lv-leading-tight: 1.08;
  --lv-leading-heading: 1.2;
  --lv-leading-body: 1.55;

  --lv-tracking-eyebrow: 0.08em;
  --lv-tracking-display: -0.01em;

  --lv-weight-light: 300;
  --lv-weight-regular: 400;
  --lv-weight-medium: 500;

  /* Spacing */
  --lv-space-1: 4px;
  --lv-space-2: 8px;
  --lv-space-3: 12px;
  --lv-space-4: 16px;
  --lv-space-5: 20px;
  --lv-space-6: 24px;
  --lv-space-8: 32px;
  --lv-space-10: 40px;
  --lv-space-16: 64px;
  --lv-space-20: 80px;
  --lv-space-24: 96px;
  --lv-space-30: 120px;

  --lv-gutter-mobile: 24px;
  --lv-gutter-desktop: 40px;
  --lv-gutter-wide: 6vw;
  --lv-gateway-gap: 2vw;
  --lv-section-padding: clamp(5rem, 8vw, 8rem);

  --lv-max-editorial: 720px;
  --lv-max-form: 640px;
  --lv-max-legal: 680px;

  --lv-radius-sm: 4px;
  --lv-radius-card: 10px;
  --lv-radius-bento: 12px;
  --lv-radius-input: 12px;
  --lv-radius-pill: 9999px;

  --lv-duration-hover: 200ms;
  --lv-duration-fast: 300ms;
  --lv-duration-medium: 400ms;
  --lv-duration-entrance: 800ms;
  --lv-dashboard-duration-heading: 600ms;
  --lv-dashboard-duration-stagger: 70ms;
  --lv-dashboard-duration-nav: 200ms;
  --lv-dashboard-duration-panel: 300ms;
  --lv-dashboard-duration-dialog: 240ms;
  --lv-dashboard-duration-progress: 400ms;

  --lv-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --lv-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --lv-ease-editorial: cubic-bezier(0.625, 0.05, 0, 1);

  --lv-z-hero-media: 0;
  --lv-z-hero-overlay: 2;
  --lv-z-gateway-overlap: 3;
  --lv-z-hero-content: 5;
  --lv-z-content: 10;
  --lv-z-veil: 50;
  --lv-z-proto-toolbar: 55;
  --lv-z-mobile-menu: 55;
  --lv-z-header: 60;
  --lv-z-lightbox: 70;
  --lv-z-dashboard-sidebar: 40;
  --lv-z-dashboard-header: 45;
  --lv-z-dashboard-overlay: 80;
  --lv-z-dashboard-dialog: 90;

  --lv-proto-toolbar-offset: 0px;

  --lv-shadow-action: 0 4px 20px rgba(0, 0, 0, 0.25);

  --lv-focus-ring: 0 0 0 2px var(--lv-color-canvas-espresso),
    0 0 0 4px var(--lv-color-accent-gold);

  --lv-target-min: 44px;
  --lv-header-height-mobile: 72px;
  --lv-header-height-desktop: 96px;
  --lv-dashboard-sidebar-width: 240px;
  --lv-dashboard-sidebar-compact: 88px;
  --lv-dashboard-topbar-height: 64px;
  --lv-dashboard-bottom-nav-height: 72px;
  --lv-scroll-padding-top: var(--lv-header-height-mobile);
  --lv-anchor-offset: calc(var(--lv-header-height-mobile) + 16px);

  --lv-journey-track-desktop: 380svh;
  --lv-journey-track-mobile: 220svh;
}

@media (min-width: 1024px) {
  :root {
    --lv-scroll-padding-top: var(--lv-header-height-desktop);
    --lv-anchor-offset: calc(var(--lv-header-height-desktop) + 16px);
  }
}

html[lang="fa"] {
  --lv-font-editorial: var(--lv-font-editorial-fa);
  --lv-font-ui: var(--lv-font-ui-fa);
}

html[lang="en"] {
  --lv-font-editorial: var(--lv-font-editorial-en);
  --lv-font-ui: var(--lv-font-ui-en);
}

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