/*
  Design tokens — Quick OMS website.
  Reference, semantic, and component custom properties.
  Breakpoints: 375 / 480 / 768 / 1024 / 1440.
*/

:root {
  /* ---------------------------------------------------------------- */
  /* 1. Reference tokens                                              */
  /* ---------------------------------------------------------------- */
  --ref-color-white: #ffffff;
  --ref-color-black: #000000;
  --ref-color-blue-500: #146ef5;
  --ref-color-blue-600: #1c73f6;
  --ref-color-blue-700: #0057d2;
  --ref-color-blue-50: #f3f8ff;
  --ref-color-blue-25: #f4f8fd;
  --ref-color-navy-900: #111827;
  --ref-color-orange-500: #f53614;
  --ref-color-red-400: #f76262;
  --ref-color-red-600: #e62b34;
  --ref-color-gray-900: #111827;
  --ref-color-gray-500: #667085;
  --ref-color-gray-100: #e5eaf0;
  --ref-color-gray-200: #e3e7ec;
  --ref-color-gray-300: #bbbbbb;
  --ref-color-green-600: #1ca268;
  --ref-color-green-700: #14922b;
  --ref-color-amber-500: #ebaa2d;
  --ref-color-amber-600: #eb9f1f;
  --ref-gradient-brand: linear-gradient(135deg, #0057d2 0%, #5d9eff 55%, #0058d4 110%);
  --ref-gradient-hero: linear-gradient(to top, #ffffff 0%, #146ef5 45%, #111827 89%);
  --ref-gradient-hero-compact: linear-gradient(to top, #146ef5 0%, #111827 89.42%);

  /* Neutrals & secondary scale */
  --ref-color-gray-150: #eeeeee;
  --ref-color-gray-180: #e5e5e5;
  --ref-color-gray-250: #cecece;
  --ref-color-gray-400: #999999;
  --ref-color-gray-600: #777777;
  --ref-color-gray-700: #555555;
  --ref-color-gray-800: #333333;
  --ref-color-purple-500: #9a74dd;
  --ref-color-green-500: #29966e;

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

  --ref-radius-xs: 6px;
  --ref-radius-sm: 10px;
  --ref-radius-md: 18px;
  --ref-radius-lg: 28px;
  --ref-radius-pill: 999px;

  --ref-font-inter: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ref-font-manrope: "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* ---------------------------------------------------------------- */
  /* 2. Semantic tokens                                                */
  /* ---------------------------------------------------------------- */

  /* Color */
  --color-bg-canvas: var(--ref-color-white);
  --color-bg-surface: var(--ref-color-white);
  --color-bg-surface-muted: var(--ref-color-blue-25);
  --color-bg-inverse: var(--ref-color-navy-900);
  --color-bg-brand: var(--ref-color-blue-500);
  --color-bg-brand-emphasis: var(--ref-gradient-brand);

  --color-text-primary: var(--ref-color-navy-900);
  --color-text-secondary: #384252;
  --color-text-muted: var(--ref-color-gray-500);
  --color-text-inverse: var(--ref-color-white);
  --color-text-accent: var(--ref-color-orange-500);

  --color-action-primary-bg: var(--ref-gradient-brand);
  --color-action-primary-text: var(--ref-color-white);
  --color-action-primary-hover-bg: linear-gradient(135deg, #0048ad 0%, #4a8bee 55%, #0048ad 110%);
  --color-action-secondary-border: var(--ref-color-white);
  --color-action-secondary-text: var(--ref-color-white);
  --color-action-inverse-bg: var(--ref-color-white);
  --color-action-inverse-text: var(--ref-color-navy-900);

  --color-border-default: var(--ref-color-gray-200);
  --color-border-subtle: rgba(227, 231, 236, 0.7);
  --color-border-strong: var(--ref-color-navy-900);

  --color-status-success-text: var(--ref-color-green-700);
  --color-status-success-strong: var(--ref-color-green-600);
  --color-status-warning-text: #7a4a0d;
  --color-status-warning-bg: rgba(235, 170, 45, 0.2);
  --color-status-error: var(--ref-color-orange-500);
  --color-status-info-bg: rgba(28, 115, 246, 0.12);
  --color-status-info-text: var(--ref-color-blue-600);

  --color-focus-ring: var(--ref-color-blue-500);

  /* Component tokens — comparison panel (Problem/Solution pattern, reused
     wherever a negative/positive comparison appears, e.g. the Compare page). */
  --color-compare-negative-bg: #fef2f2;
  --color-compare-negative-border: rgba(254, 202, 202, 0.6);
  --color-compare-negative-accent: #ef4444;
  --color-compare-negative-text: #374151;
  --color-compare-positive-bg: #eff6ff;
  --color-compare-positive-border: rgba(191, 219, 254, 0.6);
  --color-compare-positive-accent: #3b82f6;
  --color-compare-positive-text: #1f2937;

  /* Component tokens — Core Features card */
  --card-accent-border: var(--ref-color-blue-700);
  --capability-media-bg: var(--ref-color-gray-100);

  /* Component tokens — Plan comparison matrix */
  --color-compare-tier-lite: var(--ref-color-purple-500);
  --color-compare-tier-premium: var(--ref-color-blue-500);
  --color-compare-tier-enterprise: var(--ref-color-green-500);

  /* Component tokens — Terms card */
  --color-terms-item-bg: rgba(20, 110, 245, 0.1);
  --color-terms-item-border: rgba(20, 110, 245, 0.18);

  /* Component token — Vendor comparison table */
  --color-vendor-header-bg: rgba(20, 110, 245, 0.05);

  /* Typography */
  --font-family-primary: var(--ref-font-inter);
  --font-family-brand: var(--ref-font-manrope);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Typography Scale (Global Hierarchy) */
  --font-size-hero: clamp(2.25rem, 1.5rem + 2.5vw, 4.25rem);       /* Hero H1: Primary visual anchor (~60px-68px) */
  --font-size-page-title: clamp(2rem, 1.4rem + 2vw, 3.5rem);        /* Page H1: Secondary hero titles (~50px-56px) */
  --font-size-section: clamp(1.85rem, 1.25rem + 1.8vw, 3rem);        /* Section H2: Major section titles (~46px-48px) */
  --font-size-subsection: clamp(1.375rem, 1.15rem + 0.8vw, 2.25rem); /* Section H3: Feature / tab heads (~30px-36px) */
  --font-size-card-title: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);   /* Card Headings: (~18px-22px) */
  --font-size-eyebrow: clamp(0.875rem, 0.8rem + 0.2vw, 1.0625rem);   /* Eyebrows / Labels: (~14px-17px) */
  --font-size-body-lg: clamp(1rem, 0.925rem + 0.25vw, 1.25rem);      /* Lead / Hero descriptions: (~16px-20px) */
  --font-size-body: 1rem;                                            /* Standard body: 16px */
  --font-size-body-sm: 0.875rem;                                     /* Supporting / Meta text: 14px */

  /* Spacing (semantic aliases) */
  --space-page-inline: var(--ref-space-5); /* responsive, redefined per breakpoint below */
  --space-section-block: var(--ref-space-20);
  --space-section-block-compact: var(--ref-space-12);
  --space-content-gap: var(--ref-space-6);
  --space-card-padding: var(--ref-space-6);
  --space-card-gap: var(--ref-space-6);
  --space-control-gap: var(--ref-space-3);
  --space-inline-gap: var(--ref-space-4);

  /* Size */
  --size-container-max: 1600px;
  --size-header-height: 80px;
  --size-control-min-height: 52px;
  --size-icon-sm: 18px;
  --size-icon-md: 24px;
  --size-icon-lg: 32px;
  --size-touch-min: 44px;

  /* Shape */
  --radius-xs: var(--ref-radius-xs);
  --radius-sm: var(--ref-radius-sm);
  --radius-md: var(--ref-radius-md);
  --radius-lg: var(--ref-radius-lg);
  --radius-pill: var(--ref-radius-pill);

  /* Border & elevation */
  --border-width-default: 1px;
  --border-width-emphasis: 2px;
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-floating: 0 3px 9px rgba(17, 24, 40, 0.05), 0 37px 75px -37px rgba(17, 24, 40, 0.22);
  --shadow-focus: 0 0 0 3px rgba(20, 110, 245, 0.35);

  /* Motion */
  --motion-fast: 120ms;
  --motion-normal: 200ms;
  --motion-slow: 320ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive page-inline container gutters */
:root {
  --space-page-inline: 14px;
}
@media (min-width: 380px) {
  :root {
    --space-page-inline: 20px;
  }
}
@media (min-width: 480px) {
  :root {
    --space-page-inline: 24px;
  }
}
@media (min-width: 768px) {
  :root {
    --space-page-inline: 40px;
  }
}
@media (min-width: 1024px) {
  :root {
    --space-page-inline: 60px;
  }
}