/* ==========================================================================
   Design tokens — Turn.az
   Values come from the Figma variables (Turn.az website file).
   Shared by every page: link this file before any other stylesheet.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --color-main: #23ecbb;            /* Main/base */
  --color-main-lighter: #a6f7e3;    /* Main/lighter */
  --color-main-light: #defcf5;      /* Main/light */
  --color-main-darker: #0e9a7a;     /* Main/darker */
  --color-secondary: #4f36ea;       /* Secondary/base */
  --color-secondary-shadow: #1b0d78;

  /* ---- Neutrals (zinc) ---- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;

  /* ---- UI ---- */
  --color-text-main: #0a0d14;       /* text/main-900 */
  --color-bg-weak: #f6f8fa;         /* bg/weak-100 */
  --color-stroke-sub: #cdd0d5;      /* stroke/sub-300 */
  --color-stroke-soft: #e2e4e9;     /* stroke/soft-200 */
  --color-text-sub: #525866;        /* text/sub-500 */
  --color-text-soft: #868c98;       /* text/soft-400 — placeholders */
  --color-danger-900: #310413;      /* colors/base/danger-900 */
  --color-grid-line: #d9d9d9;

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

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* size / line-height pairs */
  --fs-display: 70px;  --lh-display: 120px;
  --fs-h2: 40px;       --lh-h2: 60px;
  --fs-h3: 36px;       --lh-h3: 54px;
  --fs-xl: 20px;       --lh-xl: 30px;
  --fs-lg: 18px;       --lh-lg: 28px;
  --fs-md: 16px;       --lh-md: 24px;
  --fs-sm: 14px;       --lh-sm: 20px;
  --fs-xs: 12px;       --lh-xs: 16px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 100px;

  /* ---- Effects ---- */
  --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.05);
  --shadow-dropdown: 0 16px 40px -8px rgba(88, 92, 95, 0.16); /* regular-shadow/large */
  --shadow-input: 0 1px 2px rgba(228, 229, 231, 0.24);         /* regular-shadow/x-small */
  --shadow-button: 0 1px 2px rgba(82, 88, 102, 0.06);          /* button-shadow/stroke */

  /* ---- Layout ---- */
  --container-max: 1440px;
  --gutter: 100px;          /* page side padding */
  --section-gap: 100px;     /* vertical space between page sections */
}

@media (max-width: 1200px) {
  :root {
    --fs-display: 56px;  --lh-display: 80px;
    --gutter: 48px;
    --section-gap: 80px;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-display: 36px;  --lh-display: 48px;
    --fs-h2: 28px;       --lh-h2: 40px;
    --fs-h3: 28px;       --lh-h3: 40px;
    --gutter: 16px;
    --section-gap: 64px;
  }
}