/* =========================================================
   FinCo CRM — Design tokens
   Source: Figma "FinCo CRM — Web" › Tasarım sistemi
   Values match the Figma variables one to one.
   To change a color or size, edit only this file.
   ========================================================= */

:root {
  /* ---------- Color: text ---------- */
  --color-text-primary: #15212b;
  --color-text-secondary: #495865;
  --color-text-disabled: #8496a8;
  --color-text-inverse: #fdfdff;
  --color-text-inverse-secondary: #9fb2cc;
  --color-text-link: #1e56c3;
  --color-text-link-hover: #163f8f;
  --color-text-link-pressed: #0f2f6b;

  /* ---------- Color: brand ---------- */
  --color-brand-primary: #1e56c3;
  --color-brand-primary-hover: #17459c;
  --color-brand-primary-pressed: #163f8f;
  --color-brand-tint: #f3f7fd;

  /* ---------- Color: accent ---------- */
  --color-accent-recommended: #fc9918;
  --color-accent-tint: #fef5e9;

  /* ---------- Color: surface ---------- */
  --color-surface-page: #fdfdff;
  --color-surface-subtle: #f7fafd;
  --color-surface-canvas: #eef3f9;
  --color-surface-inverse: #0c1a2e;

  /* ---------- Color: border ---------- */
  --color-border-default: #ecf2f8;
  --color-border-divider: #e4ebf3;
  --color-border-strong: #cbd9e7;
  --color-border-focus-ring: #9dbaf0;

  /* ---------- Color: interaction state ---------- */
  --color-state-hover-bg: #f3f7fd;
  --color-state-pressed-bg: #eef3f9;

  /* ---------- Color: feedback ---------- */
  --color-feedback-success: #03ae66;
  --color-feedback-success-tint: #e8f8f0;
  --color-feedback-error: #c00000;
  --color-feedback-error-tint: #fdf2f2;
  --color-feedback-error-border: #f8dbdb;

  /* ---------- Typography ---------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- Spacing scale ---------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-96: 96px;
  --space-112: 112px;
  --space-128: 128px;

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 40px;

  /* ---------- Shadow ---------- */
  --shadow-card-soft: 0 1px 2px rgba(21, 33, 43, 0.04), 0 8px 24px -6px rgba(30, 86, 195, 0.07);
  --shadow-focus: 0 0 0 3px var(--color-border-focus-ring);
  --shadow-input-focus: 0 0 0 4px rgba(30, 86, 195, 0.16);
  --shadow-floating: 0 12px 16px rgba(31, 87, 194, 0.1);
  --shadow-screen: 0 1px 3px rgba(21, 33, 43, 0.05), 0 40px 80px -8px rgba(30, 86, 195, 0.16);

  /* ---------- Glass (floating cards over the hero screen) ---------- */
  --glass-bg: rgba(253, 253, 255, 0.55);
  --glass-bg-dark: rgba(21, 33, 43, 0.82);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-border-dark: rgba(255, 255, 255, 0.18);
  --glass-blur: 28px;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --gutter: 20px;          /* mobile: < 768 */
  --navbar-height: 64px;   /* mobile */

  /* ---------- Motion ---------- */
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);   /* decelerates smoothly, no overshoot */

  /* Scroll reveal: content rises into place once, when it enters the viewport */
  --motion-reveal-duration: 700ms;
  --motion-reveal-distance: 20px;
  --motion-stagger: 80ms;                             /* delay between items in a group */

  /* Float: slow idle drift on glass cards */
  --motion-float-distance: 6px;
  --motion-float-duration: 8s;

  /* Hover lift on cards */
  --motion-lift-distance: 4px;

  /* Product screenshots: rounded frame with an inside border */
  --screenshot-radius: 16px;
  --screenshot-border-width: 1px;

  /* Product tour: time on each screen, screen change */
  --tour-interval: 6s;
  --tour-change-duration: 700ms;

  /* Cross-fade between screenshots */
  --motion-crossfade-duration: 900ms;
}

/* Tablet: 768–1279 (688 px content → 40 px gutter)
   768–1023 keeps the 64 px mobile navbar (Figma: … — tablet 768); the desktop navbar starts at 1024 */
@media (min-width: 768px) {
  :root {
    --gutter: 40px;
  }
}
@media (min-width: 1024px) {
  :root {
    --navbar-height: 72px;
  }
}

/* Desktop: ≥ 1280 */
@media (min-width: 1280px) {
  :root {
    --navbar-height: 82px;
  }
}