/* ===== GeoVisa Design Tokens — redesign «Option C» =====
   Design code: CLAUDE.md («Design Code») and .claude/agents/designer/agent.md. Values come from the approved mockup.
   Rule of the project: components use these tokens, never raw hex / px values; when a value has no token, add one here. */
:root {
    /* --- Brand blue scale (brand #3350C8 at 600) --- */
    --primary-50: #F4F7FD;   /* faint tint: map frame, table stripes */
    --primary-100: #E9EDFB;  /* icon circles, ghost button, inactive pager */
    --primary-200: #DFE8FB;  /* ghost button hover */
    --primary-300: #C5D2EE;  /* secondary text on navy, focus ring on dark surfaces */
    --primary-400: #9DB0E3;  /* dashed frames, decorative strokes */
    --primary-500: #6A7DBE;  /* input border */
    --primary-600: #3350C8;  /* BRAND: buttons, links, icons, logo, active states */
    --primary-700: #2941AD;  /* hover of 600; text on ghost button */
    --primary-800: #0B2E63;  /* request banner background (under the photo) */
    --primary-900: #062459;  /* navy panels: «Почему нам доверяют», price panel */
    --primary-950: #041A42;  /* reserve, not used in the mockup */

    /* --- Ink scale (neutrals with a blue undertone) --- */
    --neutral-50: #F1F5FC;   /* footer band */
    --neutral-100: #EEF3FB;  /* tinted panels (fee table), dropdown hover */
    --neutral-200: #DDE5F3;  /* borders of cards and dividers */
    --neutral-300: #C9D3EE;  /* strong border (burger button) */
    --neutral-400: #A3AED6;  /* disabled icons, breadcrumb separators, rating stars */
    --neutral-500: #56627F;  /* muted text: captions, labels, legal */
    --neutral-600: #44537A;  /* lead text under H1 */
    --neutral-700: #33405F;  /* body copy inside cards and sections */
    --neutral-800: #1B2A4E;  /* navigation links, list text */
    --neutral-900: #0E1F45;  /* INK: headings and primary text */
    --neutral-950: #071230;  /* reserve, not used in the mockup */

    /* --- Signal red (very sparing: route destination marker, «вы» tag) --- */
    --signal-500: #E5392D;
    --signal-700: #A82518;

    /* --- Semantic --- */
    --success: #187A4F;
    --warning: #8F5E0E;
    --error: #C62F23;
    --error-on-dark: #FFB4AD;  /* error text on navy */
    --info: var(--primary-600);

    /* --- Third-party brands --- */
    --telegram: #26A5E4;
    --telegram-hover: #1e96d1;

    /* --- Surfaces --- */
    --surface-page: #E8F1FA;                     /* body background around the white sheet */
    --surface-page-top: #D2E6F8;
    --page-gradient: linear-gradient(180deg, #D2E6F8 0, #E8F1FA 720px);
    --surface-primary: #ffffff;                  /* the sheet and cards */
    --surface-secondary: var(--neutral-50);      /* footer */
    --surface-tertiary: var(--neutral-100);      /* tinted panels */
    --surface-tint: var(--primary-100);          /* icon circles, ghost buttons */
    --surface-photo: #CFE0F5;                    /* placeholder under photos while they load */
    --surface-step: linear-gradient(180deg, #D6E5F7 0%, #E6EFFB 100%);        /* step cards */
    --surface-head: linear-gradient(180deg, #E1EDFA 0%, #F2F7FD 100%);        /* inner-page head */
    --surface-hero-fade: #EAF2FB;                /* pale field under the hero text */
    --surface-navy: var(--primary-900);
    --surface-banner: var(--primary-800);
    --surface-inverse: var(--primary-900);
    --surface-overlay: rgba(6, 36, 89, 0.5);
    --surface-glass: rgba(255, 255, 255, 0.93);  /* tags over photos */
    --surface-glass-border: rgba(255, 255, 255, 0.2);
    --surface-chip: rgba(255, 255, 255, 0.8);     /* «вы / мы» tag on a step card */
    --surface-on-navy: rgba(255, 255, 255, 0.14); /* icon circles on the navy panel */

    /* --- Text --- */
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-700);
    --text-tertiary: var(--neutral-500);
    --text-lead: var(--neutral-600);
    --text-nav: var(--neutral-800);
    --text-inverse: #ffffff;
    --text-inverse-muted: var(--primary-300);
    --text-on-primary: #ffffff;
    --text-link: var(--primary-600);
    --text-link-hover: var(--primary-700);

    /* --- Borders --- */
    --border-default: var(--neutral-200);
    --border-light: #EDF1F8;
    --border-strong: var(--neutral-300);
    --border-input: var(--primary-500);
    --border-hairline: #E3EAF6;                  /* line under the header, outline of the dropdown */
    --border-width: 1px;

    /* --- Font (Onest, self-hosted: static/fonts/onest/) --- */
    --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* --- Type scale ---
       The mockup uses in-between sizes; snap them to the nearest step:
       12.5–13 → 2xs/xs, 14–14.5 → sm, 15–15.5 → base, 16–16.5 → md, 17–18 → lg, 19–20 → xl, 21–24 → 2xl. */
    --text-2xs: 0.78125rem;                              /* 12.5px  tags, badges */
    --text-xs: 0.84375rem;                               /* 13.5px  captions, form labels, legal */
    --text-sm: 0.90625rem;                               /* 14.5px  meta lines, breadcrumbs */
    --text-base: 0.96875rem;                             /* 15.5px  card text, navigation, footer */
    --text-md: 1rem;                                     /* 16px    buttons, inputs, lists (never below 16px in inputs) */
    --text-lg: 1.0625rem;                                /* 17px    lead paragraphs, section subtitles */
    --text-xl: 1.1875rem;                                /* 19px    card titles, FAQ questions */
    --text-2xl: 1.375rem;                                /* 22px    key figures, big card titles */
    --text-3xl: clamp(1.75rem, 2.6vw, 2.375rem);         /* 28–38px H2 */
    --text-4xl: clamp(2.25rem, 4.3vw, 3.875rem);         /* 36–62px H1 of inner pages */
    --text-5xl: clamp(2.75rem, 5.6vw, 5rem);             /* 44–80px H1 of the home page */
    --text-banner: clamp(1.625rem, 2.7vw, 2.375rem);       /* 26–38px heading of the request banner */
    --text-lead-size: clamp(1.0625rem, 1.5vw, 1.3125rem);  /* 17–21px lead under H1 (--text-lead is its colour) */
    --text-heading-sm: 1.75rem;                            /* 28px heading inside running text (24px ≤640) */
    --text-stat: 1.875rem;                                 /* 30px figure of a stat card */
    --text-price-name: 1.625rem;                           /* 26px visa name in the price panel */
    --text-price: 2.875rem;                              /* 46px    price in the navy panel (38px on phones) */
    --text-price-sm: 2.125rem;                           /* 34px    price in a tier card */

    /* --- Font Weights (400 text, 500 headings and UI, 600 emphasis) --- */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;        /* only for <b>/<strong> defaults; not a design weight */

    /* --- Line Heights --- */
    --leading-none: 1;
    --leading-tight: 1.1;    /* H1, H2, prices */
    --leading-snug: 1.3;     /* card titles, UI */
    --leading-normal: 1.5;   /* body */
    --leading-relaxed: 1.6;  /* long reading text */

    /* --- Letter Spacing --- */
    --tracking-tighter: -0.025em;  /* H1 */
    --tracking-tight: -0.02em;     /* H2, prices */
    --tracking-snug: -0.01em;      /* card titles */
    --tracking-normal: 0;
    --tracking-caps: 0.09em;       /* small uppercase labels: «ШАГ», «ПОЛНОЕ СОПРОВОЖДЕНИЕ» */

    /* --- Spacing (8px base grid; names are n × 4px, half steps as -n-5) ---
       The mockup uses in-between values; snap odd ones to the nearest step (5 → 4 or 6, 13 → 12 or 14). */
    --space-0: 0;
    --space-0-5: 0.125rem;  /* 2px */
    --space-1: 0.25rem;   /* 4px */
    --space-1-5: 0.375rem;  /* 6px */
    --space-2: 0.5rem;    /* 8px */
    --space-2-5: 0.625rem;  /* 10px */
    --space-3: 0.75rem;   /* 12px */
    --space-3-5: 0.875rem;  /* 14px */
    --space-4: 1rem;      /* 16px */
    --space-4-5: 1.125rem;  /* 18px */
    --space-5: 1.25rem;   /* 20px */
    --space-5-5: 1.375rem;  /* 22px */
    --space-6: 1.5rem;    /* 24px */
    --space-6-5: 1.625rem;  /* 26px */
    --space-7: 1.75rem;   /* 28px */
    --space-8: 2rem;      /* 32px */
    --space-9: 2.25rem;   /* 36px */
    --space-10: 2.5rem;   /* 40px */
    --space-11: 2.75rem;  /* 44px */
    --space-12: 3rem;     /* 48px */
    --space-13: 3.25rem;  /* 52px */
    --space-14: 3.5rem;   /* 56px */
    --space-15: 3.75rem;  /* 60px */
    --space-16: 4rem;     /* 64px */
    --space-18: 4.5rem;   /* 72px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    /* --- Layout (desktop values; overridden at 1100px and 640px in responsive.css) --- */
    --sheet-max: 1440px;             /* the white rounded sheet that holds the whole page */
    --sheet-margin: 16px 24px 24px;  /* page background visible around the sheet; 0 on phones */
    --page-gutter: 64px;             /* side padding of sections: 40px ≤1100, 16px ≤640 */
    --section-gap: 72px;             /* space above each section: 64px ≤1100, 52px ≤640 */
    --grid-gap: 20px;                /* gap between cards: 12px ≤640 */
    --sheet-width: min(100cqw - 48px, var(--sheet-max));  /* inner width of the sheet; 100cqw ≤640 */

    /* Text measures (max-width of a text block) */
    --measure-xs: 340px;             /* caption beside a section heading */
    --measure-sm: 460px;             /* text of the request banner */
    --measure-md: 600px;             /* lead under the H1 of an inner page */
    --measure-lg: 640px;             /* section subtitle */
    --measure-legal: 860px;          /* legal text */
    --measure-xl: 900px;             /* intro text of a visa page */

    /* --- Shadows (blue-tinted, soft) --- */
    --shadow-xs: 0 1px 0 #E3EAF6;                              /* hairline under the header */
    --shadow-sm: 0 8px 22px rgba(20, 45, 110, 0.08);           /* small chips (key facts) */
    --shadow-md: 0 10px 30px rgba(20, 45, 110, 0.10);          /* cards */
    --shadow-lg: 0 18px 40px rgba(20, 45, 110, 0.16);          /* card hover */
    --shadow-xl: 0 24px 54px rgba(20, 45, 110, 0.18);          /* photo in the page head, price panel */
    --shadow-2xl: 0 24px 60px rgba(4, 20, 60, 0.35);           /* white form bar over the photo banner */
    --shadow-btn: 0 10px 24px rgba(51, 80, 200, 0.28);         /* primary button */
    --shadow-btn-sm: 0 6px 18px rgba(51, 80, 200, 0.28);       /* primary button in the header */
    --shadow-float: 0 6px 16px rgba(20, 45, 110, 0.2);          /* round arrow button on a photo card */
    --shadow-pop: 0 18px 44px rgba(20, 45, 110, 0.18), 0 0 0 1px #E3EAF6;  /* dropdown */

    /* Focus: a 3px outline, 2px offset (see base.css). Rings kept for inputs. */
    --focus-outline: 3px solid var(--primary-600);
    --focus-outline-on-dark: 3px solid var(--primary-300);
    --ring-primary: 0 0 0 3px rgba(51, 80, 200, 0.25);
    --ring-error: 0 0 0 3px rgba(198, 47, 35, 0.2);

    /* --- Border Radius (large and soft; buttons are rounded rectangles, not pills) --- */
    --radius-none: 0;
    --radius-sm: 14px;      /* inputs, small buttons, dropdown rows */
    --radius-md: 18px;      /* buttons, chips, dropdown panel */
    --radius-lg: 22px;      /* cards on phones */
    --radius-xl: 26px;      /* cards on desktop */
    --radius-2xl: 32px;     /* the sheet, navy panels, banner, page-head photo */
    --radius-full: 9999px;  /* tags, badges, round icon buttons */

    /* --- Transitions --- */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;

    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --transition: all var(--duration-normal) var(--ease-default);
    --transition-fast: all var(--duration-fast) var(--ease-default);
    --transition-slow: all var(--duration-slow) var(--ease-default);

    /* --- Component Tokens --- */

    /* Buttons: 52px default, 44px small (header), 64px large (hero) */
    --btn-min-height: 52px;
    --btn-min-height-sm: 44px;
    --btn-min-height-lg: 64px;
    --btn-padding-sm: 0 18px;
    --btn-padding-md: 0 26px;
    --btn-padding-lg: 0 32px;
    --btn-radius: var(--radius-md);
    --btn-radius-sm: var(--radius-sm);
    --btn-font-size-sm: var(--text-base);
    --btn-font-size-md: var(--text-md);
    --btn-font-size-lg: var(--text-lg);
    --btn-wrap-basis: 150px;   /* buttons side by side on a phone wrap below this width */

    /* Cards */
    --card-padding: 26px;
    --card-padding-sm: 20px;
    --card-radius: var(--radius-xl);
    --card-radius-sm: var(--radius-lg);
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-lg);
    --card-border: 1px solid var(--border-default);

    /* Inputs */
    --input-padding: 0 14px;
    --input-radius: var(--radius-sm);
    --input-border: 1px solid var(--border-input);
    --input-min-height: 50px;

    /* Icon circles */
    --icon-circle: 56px;       /* 44px on phones */
    --icon-circle-bg: var(--surface-tint);
    --icon-circle-color: var(--primary-600);

    /* Header */
    --header-height: 76px;
    --header-height-mobile: 64px;
    --header-bg: #ffffff;
    --nav-dropdown-min-width: 330px;

    /* Logo lockup: mark + «GeoVisa» + descriptor */
    --logo-mark-height: 44px;            /* 36px ≤640, 32px ≤350 */
    --logo-name-size: 1.6875rem;         /* 27px; --text-2xl ≤640, --text-xl ≤350 */
    --logo-descriptor-size: 0.59375rem;  /* 9.5px */
    --logo-descriptor-tracking: 0.098em;

    /* Smallest interactive target on phones */
    --tap-target: 44px;

    /* Footer */
    --footer-about-max: 320px;

    /* Hero (home) */
    --hero-height: clamp(520px, calc((100cqw - 48px) * 0.441), 700px);
    --hero-photo-height: min(52cqw, 470px);  /* ≤1100, where the photo goes under the text; 300px ≤640 */
    --hero-text-max: 620px;
    --hero-subtitle-max: min(500px, 36cqw);  /* 560px ≤1100, none ≤640 */

    /* Steps carousel (home) */
    --carousel-visible: 4;                   /* whole cards in view: 3 ≤1239, 2 ≤960, 1 ≤700 */
    --carousel-peek: 44px;                   /* visible part of the next card */
    --carousel-fade: 28px;                   /* masked fade at both edges of the row */
    --step-card-max: 340px;                  /* a single card in view is not wider than this */
    --step-card-min-height: 452px;           /* 428px ≤640 */
    --step-photo-height: 176px;
    --route-width: 5px;                      /* the blue line across the step photos */

    /* Page head (inner pages) */
    --page-head-deco-width: min(44cqw, 560px);  /* decorative route line of the simple head */
    --key-fact-basis: 140px;                 /* key-fact chips share a row on phones down to this width */

    /* Service card (catalogue) */
    --service-card-photo-width: 230px;
    --service-card-photo-min-height: 270px;
    --service-card-photo-height: 170px;      /* ≤640, where the photo goes on top */

    /* Map on the Contacts page */
    --map-height: 380px;                     /* 300px ≤640 */

    /* Request banner */
    --banner-min-height: 404px;
    --banner-photo-height: 210px;            /* photo strip above the form on phones */

    /* Z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-header: 400;
    --z-backdrop: 500;
    --z-modal: 600;
    --z-popover: 700;
    --z-toast: 800;
    --z-float: 900;
    --z-tooltip: 1400;

    /* Hero */
    --hero-gradient: linear-gradient(90deg, #EAF2FB 0%, rgba(234, 242, 251, 0.95) 24%, rgba(234, 242, 251, 0.72) 40%, rgba(234, 242, 251, 0.22) 55%, rgba(234, 242, 251, 0) 66%);
    --hero-gradient-stacked: linear-gradient(180deg, #EEF4FC 0%, #D9E7F7 62%, #CEE0F4 100%);   /* ≤1100px: text above the photo */
    --banner-shade-stacked: linear-gradient(180deg, rgba(6, 36, 89, 0.12) 0, rgba(6, 36, 89, 0.3) 90px, #0B2E63 208px);   /* ≤640: photo strip on top */
    --banner-shade: linear-gradient(0deg, rgba(6, 36, 89, 0.82) 0%, rgba(6, 36, 89, 0) 58%), linear-gradient(90deg, rgba(6, 36, 89, 0.9) 0%, rgba(6, 36, 89, 0.68) 36%, rgba(6, 36, 89, 0.18) 68%, rgba(6, 36, 89, 0.04) 100%);
}