/* Design tokens for the 2pay.az website: the reference design language
   (owner, 2026-10-15), as in the app (app/globals.css, docs/design-system.md).
   A white page, 1px lines that box everything, square corners, no shadows or
   gradients, one electric-blue accent and black primary buttons. Every color,
   size and font used by the site's components, pages, the pixel mosaic and the
   globe comes from here. */

/* Geist and Geist Mono (variable, SIL OFL 1.1: assets/fonts/Geist-OFL.txt),
   self-hosted so the page makes no third-party requests. latin carries
   ı ç ö ü and latin-ext ə ğ ş İ (checked with fontTools). Neither has arrows
   or geometric shapes (→ ⇄ ■ ▷ ↗): the site draws those with CSS or SVG. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* === Accent and primary action: THE ONE PLACE TO CHANGE THE BRAND COLORS ===
     The same group as the top of @theme in app/globals.css; keep them equal.
     One electric blue for selected states, links, focus and highlights, and a
     black primary button (2Pay green and Carbon blue are retired). */
  --color-accent: #0055ff;                 /* 5.6:1 on white; white text on it 5.6:1 */
  --color-accent-hover: #0047d6;
  --color-accent-on-dark: #5c8dff;         /* Thin marks and text on the dark band (5.8:1 on #14151a) */
  --color-accent-on-dark-hover: #8aaeff;
  --color-primary: #1a1a1a;                /* Primary button */
  --color-primary-hover: #333333;
  --color-primary-active: #000000;
  /* The pixel mosaic on the dark band, darkest to brightest. */
  --color-pixel-1: #131f51;
  --color-pixel-2: #132162;
  --color-pixel-3: #142887;
  --color-pixel-4: #113dde;
  --color-pixel-5: #1241f3;

  /* === Page, lines and text === */
  --color-background: #ffffff;
  --color-layer-hover: #f7f7f7;
  --color-border-subtle: #ebebeb;          /* The 1px lines that box everything */
  --color-border-strong: #d4d4d4;          /* Chip outlines */
  --color-text-primary: #111111;           /* Ink */
  --color-text-secondary: #6b6b6b;         /* Body copy (5.3:1) */
  --color-text-helper: #767676;            /* Mono meta, captions (4.5:1, AA) */
  --color-text-placeholder: #8a8a8a;       /* The "/03" of a section number (as app/globals.css) */
  --color-text-decor: #c8c8c8;             /* Decorative marks only: the / of slash headings, the // of card indexes */
  --color-text-on-color: #ffffff;          /* Text on the accent and on black */
  --color-focus: var(--color-accent);      /* 2px focus outline */
  --color-focus-inset: #ffffff;            /* Inner ring of a focused filled button or chip */

  /* === Buttons === */
  --color-button-primary: var(--color-primary);
  --color-button-primary-hover: var(--color-primary-hover);
  --color-button-primary-active: var(--color-primary-active);
  --color-button-primary-text: #ffffff;
  --color-button-tertiary: #111111;        /* Bottom line and label of the underlined button */
  --color-button-tertiary-hover: #f7f7f7;
  --color-button-tertiary-active: #ebebeb;

  /* === Dark band: the top of the page, the network tile === */
  --color-shell: #14151a;                  /* Band background */
  --color-shell-grid: #26272c;             /* Its 48px square grid */
  --color-shell-text: #ffffff;
  --color-shell-text-secondary: #a0a1a7;
  --color-shell-focus: #ffffff;            /* Focus outline on the band itself */
  --color-ticker: #131313;                 /* Ticker strip */
  --color-ticker-text: #c8c8c8;

  /* === Dotted panel === */
  --color-dots-panel: #f7f7f7;
  --color-dots-dot: #dadada;

  /* === Globe on the dark tile (read by assets/js/globe.js; hex values only) ===
     Land as square blue pixels, routes in the on-dark accent, Baku white. */
  --globe-core: #17181e;
  --globe-dot: #1241f3;
  --globe-route: #5c8dff;
  --globe-home: #ffffff;
  --globe-city: #a0a1a7;
  --globe-outline: #34353b;

  /* === Type: Geist for text and headings, Geist Mono for labels, chips,
     buttons and codes (uppercase, +0.02em). Headings are regular weight with
     tight tracking. === */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --type-mono-label: 400 12px/16px var(--font-mono);        /* Chips, labels */
  --type-mono-caption: 400 11px/16px var(--font-mono);      /* Section labels, card indexes, footer */
  --type-mono-button: 400 13px/16px var(--font-mono);       /* Buttons */
  --type-body-01: 400 14px/21px var(--font-sans);
  --type-body-02: 400 16px/24px var(--font-sans);
  --type-heading-03: 400 20px/26px var(--font-sans);        /* Card titles */
  --tracking-mono: 0.02em;
  --tracking-heading: -0.03em;
  /* Hero line: 40px on phones up to 88px on wide screens. */
  --text-display: clamp(40px, 1.2rem + 4vw, 88px);
  /* Section headings: 30px on phones up to 52px. */
  --text-section: clamp(30px, 1rem + 2.3vw, 52px);

  /* === Spacing === */
  --spacing-02: 4px;
  --spacing-03: 8px;
  --spacing-04: 12px;
  --spacing-05: 16px;
  --spacing-06: 24px;
  --spacing-07: 32px;
  --spacing-08: 40px;
  --spacing-09: 48px;

  /* === Layout === */
  --container: 1600px;                     /* Widest content, as in the app */
  --gutter: 16px;                          /* Page margin: 16px, 32px from 1024px */
  --cell: 38px;                            /* Dark grid cell (band, API panel, globe tile); half in the band below 1280px */
  --chip-height: 38px;                     /* One cell: every chip and Launch app in the header strip */
  --ticker-height: 40px;

  /* === Motion === */
  --duration-fast-01: 70ms;
  --duration-fast-02: 110ms;
  --duration-moderate-02: 240ms;
  --duration-slow-01: 400ms;               /* The mobile menu sliding in */
  --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-exit: cubic-bezier(0.2, 0, 1, 0.9);
}

@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}