/* ============================================================================
   CARTELAND — Foundations: Color & Type
   "Cartographic precision." Земельный банк / land-parcel marketplace, Moscow.
   Import this file in any Carteland artifact:  @import url("colors_and_type.css");
   Fonts are loaded from Google Fonts (both are Cyrillic-complete — required, the
   product is Russian-first). Self-host from /fonts for production if desired.
============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------------------------------------------------------------- TYPE --- */
  --font-sans: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* Display uses the sans at heavy weights — the technical character comes from
     mono labels, not a second display face. Keep the family count tight. */
  --font-display: var(--font-sans);

  /* Type scale — 1.250 major-third, tightened for dense technical UI.
     Sizes in rem (root = 16px). Display sizes are px for fixed-canvas work. */
  --text-2xs: 11px;   /* mono micro-labels, table captions */
  --text-xs:  12px;   /* labels, badges, table data */
  --text-sm:  13px;   /* secondary UI text, dense tables */
  --text-base:15px;   /* body default */
  --text-md:  17px;   /* lead paragraph */
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 62px;
  --text-6xl: 80px;

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;   /* display headlines */
  --tracking-snug: -0.01em;    /* titles */
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;     /* mono labels, eyebrows */
  --tracking-caps: 0.08em;     /* all-caps micro-labels */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ------------------------------------------------------------- COLOR ----- */
  /* Ink — warm near-black, the primary text & dark surface.                   */
  --ink-900: #0E1110;
  --ink-800: #181C1A;
  --ink-700: #262B28;
  --ink-600: #3A413D;

  /* Warm neutral / "paper" ramp — surveyor's bond paper, not cold gray.       */
  --paper:    #FAF9F6;   /* app background */
  --surface:  #FFFFFF;   /* cards, sheets */
  --surface-sunken: #F3F1EC; /* wells, inset, table stripes */
  --n-100: #ECEAE3;
  --n-200: #E2DFD7;      /* hairline borders */
  --n-300: #CFCBC0;
  --n-400: #B0AB9E;
  --n-500: #8B867A;      /* muted/placeholder text */
  --n-600: #6B675C;      /* secondary text */
  --n-700: #4C4942;

  /* Primary — "Cadastral Green". Topographic, land, parcels. Confident, not eco-bright. */
  --green-50:  #EEF5F0;
  --green-100: #D7E9DE;
  --green-200: #AED3BE;
  --green-300: #6FB291;
  --green-500: #1E8A5B;   /* interactive / hover bright */
  --green-600: #15724A;   /* PRIMARY brand accent */
  --green-700: #0F5A3A;   /* pressed / deep */
  --green-900: #0A3825;   /* on-paper text accent */

  /* Secondary — "Survey Amber/Clay". Terrain, parcel highlights, sparingly.    */
  --clay-50:  #FBF1E9;
  --clay-100: #F4DFCC;
  --clay-400: #D88B4F;
  --clay-500: #C66A35;   /* map parcel highlight, accents */
  --clay-700: #99491F;

  /* Semantic */
  --success: #15724A;  --success-bg: #EEF5F0;
  --warning: #B9791A;  --warning-bg: #FAF1DF;
  --danger:  #BE3A2C;  --danger-bg:  #FBEAE7;
  --info:    #2A62B0;  --info-bg:    #E9F0FA;

  /* --------------------------------------------------- SEMANTIC ALIASES ---- */
  --bg: var(--paper);
  --fg1: var(--ink-900);   /* primary text */
  --fg2: var(--n-600);     /* secondary text */
  --fg3: var(--n-500);     /* muted/placeholder */
  --fg-on-dark: #F4F3EF;
  --fg-on-accent: #FFFFFF;
  --accent: var(--green-600);
  --accent-hover: var(--green-500);
  --accent-press: var(--green-700);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --link: var(--green-700);

  /* ---------------------------------------------------- SPACING (4px) ------ */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* --------------------------------------------------------- RADII --------- */
  /* Technical & restrained. Data surfaces stay near-square. */
  --radius-xs: 3px;    /* inputs, chips, badges */
  --radius-sm: 6px;    /* buttons, small cards */
  --radius-md: 10px;   /* cards, panels */
  --radius-lg: 14px;   /* large surfaces, modals */
  --radius-xl: 20px;   /* marketing feature cards */
  --radius-pill: 999px;

  /* ------------------------------------------------------- ELEVATION ------- */
  /* Borders carry structure; shadows are soft, warm, low. */
  --shadow-xs: 0 1px 2px rgba(14,17,16,0.05);
  --shadow-sm: 0 1px 2px rgba(14,17,16,0.06), 0 1px 1px rgba(14,17,16,0.04);
  --shadow-md: 0 4px 12px -2px rgba(14,17,16,0.08), 0 2px 4px -2px rgba(14,17,16,0.06);
  --shadow-lg: 0 12px 32px -8px rgba(14,17,16,0.12), 0 4px 8px -4px rgba(14,17,16,0.06);
  --shadow-xl: 0 24px 60px -12px rgba(14,17,16,0.18);
  --ring-accent: 0 0 0 3px rgba(21,114,74,0.18);

  /* --------------------------------------------------------- MOTION -------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur: 200ms;       /* @kind other */
  --dur-slow: 320ms;  /* @kind other */

  /* ------------------------------------------------- CARTOGRAPHIC TEXTURE -- */
  /* Faint parcel grid — a brand background motif. Apply on .paper-grid. */
  --grid-line: rgba(14,17,16,0.045);
  --grid-line-strong: rgba(14,17,16,0.075);
}

/* ============================ SEMANTIC TYPE ROLES ===========================
   Use these classes (or copy the rules) instead of restyling from scratch.   */

.t-display {            /* hero / marketing headline */
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.t-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-4xl); line-height: 1.1;  letter-spacing: var(--tracking-tight); color: var(--fg1); }
.t-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1.15; letter-spacing: var(--tracking-snug);  color: var(--fg1); }
.t-h3 { font-family: var(--font-sans);    font-weight: 700; font-size: var(--text-2xl); line-height: 1.2;  letter-spacing: var(--tracking-snug);  color: var(--fg1); }
.t-h4 { font-family: var(--font-sans);    font-weight: 600; font-size: var(--text-xl);  line-height: 1.25; letter-spacing: var(--tracking-snug);  color: var(--fg1); }
.t-title { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-lg);  line-height: 1.3;  color: var(--fg1); }

.t-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--fg2); }
.t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg1); }
.t-small { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-sm); line-height: 1.45; color: var(--fg2); }

/* Mono — coordinates, areas, cadastral numbers, prices, eyebrows. The
   "technical" voice of the brand. */
.t-mono { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-sm); letter-spacing: 0; color: var(--fg1); font-feature-settings: "tnum" 1; }
.t-data { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: var(--fg1); }

/* Eyebrow / micro-label — uppercase mono, the cadastral tag voice. */
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg2);
}

/* ============================ TEXTURE UTILITY ============================== */
.paper-grid {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}
.paper-grid-fine {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 16px 16px;
}