/* =========================================================================
   Sverchkov Design System — Colors & Type
   Personal landing page for Evgeny Sverchkov, a digital marketing specialist.
   Visual language: clean, restrained Material-inspired web UI in a white/blue
   palette. Built on Materialize CSS tokens, retuned for a personal-brand feel.
   ========================================================================= */

/* ------------------------- Google Fonts (substitutes) -------------------- */
/* NOTE: The original Materialize stack uses the OS/system UI font + Roboto for
   display tokens. We substitute Inter (UI body) and Manrope (display/headline)
   from Google Fonts for a more modern, Russian-friendly personal-brand look.
   Switch back to Roboto by changing the --font-sans-display variable below. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ========================= COLOR FOUNDATIONS ========================= */

  /* --- Brand blue scale (Material "light-blue" family, darkened ~1 step) - */
  --blue-50:  #e6f2ff;  /* wash / surface tint            */
  --blue-100: #cbe6ff;  /* hero background, soft cards    */
  --blue-200: #8fcdff;  /* disabled / inverse primary     */
  --blue-300: #5db3f0;
  --blue-400: #3d98d4;
  --blue-500: #0f7eb8;  /* interactive hover              */
  --blue-600: #006495;  /* PRIMARY — brand blue           */
  --blue-700: #005783;
  --blue-800: #004b71;  /* pressed / deep-brand surfaces  */
  --blue-900: #003450;
  --blue-950: #001e30;

  /* --- Neutral scale (cool off-white → near-black) ---------------------- */
  --neutral-0:   #ffffff;
  --neutral-25:  #fcfcff;  /* page background             */
  --neutral-50:  #f9f9fc;
  --neutral-100: #f0f0f3;  /* subtle card / hover wash    */
  --neutral-200: #e2e2e5;  /* dividers                    */
  --neutral-300: #c6c6c9;
  --neutral-400: #aaabae;  /* disabled text               */
  --neutral-500: #8f9194;  /* secondary text              */
  --neutral-600: #76777a;
  --neutral-700: #5d5e61;  /* body text on light          */
  --neutral-800: #454749;
  --neutral-900: #2e3133;  /* headings                    */
  --neutral-950: #1a1c1e;  /* near-black, rare            */

  /* --- Cool blue-tinted neutral (for chips, secondary surfaces) -------- */
  --cool-50:  #ecf1f9;
  --cool-100: #dee3ea;
  --cool-200: #c1c7ce;
  --cool-300: #a6acb3;
  --cool-400: #8b9198;
  --cool-500: #72787e;
  --cool-600: #595f65;
  --cool-700: #41474d;
  --cool-800: #2b3137;

  /* --- Semantic ------------------------------------------------------- */
  --success: #43a047;          /* Materialize green darken-1            */
  --success-container: #e8f5e9;
  --warning: #ffb300;          /* amber darken-1                        */
  --warning-container: #fff8e1;
  --error:   #ba1a1a;          /* Material M3 error                     */
  --error-container: #ffdad6;
  --info:    var(--blue-500);
  --info-container: var(--blue-50);

  /* --- Shades --------------------------------------------------------- */
  --black: #000000;
  --white: #ffffff;

  /* ========================= SEMANTIC COLOR TOKENS ===================== */
  /* Light theme (default). Match Material M3 tonal naming.                */

  /* surfaces */
  --bg:                 var(--neutral-25);     /* page / body             */
  --surface:            var(--neutral-0);      /* cards                   */
  --surface-alt:        var(--neutral-100);    /* secondary surface       */
  --surface-tint:       var(--blue-50);        /* hero wash               */
  --surface-inverse:    var(--neutral-900);    /* footer / dark band      */

  /* foreground */
  --fg1:                var(--neutral-950);    /* headings                */
  --fg2:                var(--neutral-700);    /* body                    */
  --fg3:                var(--neutral-500);    /* secondary / meta        */
  --fg-muted:           var(--neutral-400);    /* placeholder / disabled  */
  --fg-on-dark:         var(--neutral-25);
  --fg-on-primary:      var(--white);

  /* brand + interactive */
  --primary:            var(--blue-600);       /* brand blue              */
  --primary-hover:      var(--blue-700);
  --primary-pressed:    var(--blue-800);
  --primary-container:  var(--blue-100);       /* tonal button bg         */
  --on-primary-container: var(--blue-950);
  --link:               var(--blue-500);
  --link-hover:         var(--blue-700);

  /* outline & dividers */
  --outline:            var(--cool-500);
  --outline-variant:    var(--cool-100);       /* dividers                */
  --border:             #e5ebf2;               /* default 1px border      */

  /* focus */
  --focus-ring:         rgba(0, 100, 149, 0.35);

  /* ========================= TYPOGRAPHY ========================= */
  /* Families */
  --font-sans:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-sans-display:  'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:          'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-extrabold: 800;

  /* Type scale (desktop). Uses a modular-ish scale anchored on body=16px. */
  --fs-display-1: 72px;   /* hero                                */
  --fs-display-2: 56px;
  --fs-h1:        44px;
  --fs-h2:        36px;
  --fs-h3:        28px;
  --fs-h4:        22px;
  --fs-h5:        18px;
  --fs-h6:        16px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --fs-overline:  12px;

  --lh-tight:     1.1;
  --lh-snug:      1.2;
  --lh-normal:    1.4;
  --lh-relaxed:   1.6;
  --lh-loose:     1.75;

  --ls-tight:     -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.02em;
  --ls-overline:  0.12em;

  /* ========================= SPACING & RADIUS ========================= */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;   /* default card / buttons (Material floating = 16) */
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;

  /* ========================= ELEVATION (Material z-depth, tuned) ===== */
  --shadow-0: none;
  --shadow-1: 0 1px 2px 0 rgba(16, 40, 70, 0.06),
              0 1px 3px 0 rgba(16, 40, 70, 0.08);
  --shadow-2: 0 2px 4px -1px rgba(16, 40, 70, 0.08),
              0 4px 8px 0 rgba(16, 40, 70, 0.06);
  --shadow-3: 0 4px 8px -2px rgba(16, 40, 70, 0.10),
              0 8px 24px -4px rgba(16, 40, 70, 0.08);
  --shadow-4: 0 8px 16px -4px rgba(16, 40, 70, 0.12),
              0 16px 40px -8px rgba(16, 40, 70, 0.10);
  --shadow-5: 0 12px 24px -6px rgba(16, 40, 70, 0.14),
              0 24px 56px -12px rgba(16, 40, 70, 0.12);

  /* Brand-tinted shadow for highlight cards */
  --shadow-brand: 0 8px 24px -6px rgba(0, 100, 149, 0.25),
                  0 2px 6px -1px rgba(0, 100, 149, 0.15);

  /* ========================= MOTION ========================= */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);      /* M3 standard     */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);

  --dur-xs:  100ms;
  --dur-sm:  150ms;
  --dur-md:  200ms;
  --dur-lg:  300ms;
  --dur-xl:  500ms;

  /* ========================= LAYOUT ========================= */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
}

/* ========================= DARK THEME (opt-in) =========================== */
:root[data-theme='dark'] {
  --bg:                 var(--neutral-950);
  --surface:            #202325;
  --surface-alt:        #2a2d2f;
  --surface-tint:       var(--blue-900);
  --surface-inverse:    var(--neutral-25);

  --fg1:                #e2e2e5;
  --fg2:                #c6c6c9;
  --fg3:                #aaabae;
  --fg-muted:           #76777a;

  --primary:            var(--blue-200);
  --primary-hover:      var(--blue-300);
  --primary-pressed:    var(--blue-400);
  --primary-container:  var(--blue-800);
  --on-primary-container: var(--blue-100);
  --link:               var(--blue-200);

  --outline-variant:    #41474d;
  --border:             #2f3336;
}

/* ========================= SEMANTIC ELEMENT STYLES ======================= */
html {
  box-sizing: border-box;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: inherit; }

body {
  background: var(--bg);
  color: var(--fg2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: var(--w-regular);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans-display);
  color: var(--fg1);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--sp-4) 0;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--w-bold); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--w-bold); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); text-transform: uppercase; letter-spacing: var(--ls-overline); font-size: var(--fs-overline); color: var(--fg3); }

.display-1 {
  font-family: var(--font-sans-display);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  font-weight: var(--w-extrabold);
  color: var(--fg1);
}
.display-2 {
  font-family: var(--font-sans-display);
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  font-weight: var(--w-bold);
  color: var(--fg1);
}

p { margin: 0 0 var(--sp-4) 0; }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg2); }
small, .caption { font-size: var(--fs-caption); color: var(--fg3); }
.overline {
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  font-weight: var(--w-semibold);
  color: var(--fg3);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-md) var(--ease-standard);
}
a:hover { color: var(--link-hover); }

strong, b { font-weight: var(--w-semibold); color: var(--fg1); }
em, i    { font-style: italic; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code { background: var(--surface-alt); padding: 2px 6px; border-radius: var(--radius-xs); }

hr, .divider {
  border: 0;
  height: 1px;
  background: var(--outline-variant);
  margin: var(--sp-6) 0;
}

blockquote {
  margin: var(--sp-5) 0;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--primary);
  color: var(--fg2);
  font-style: italic;
}

::selection {
  background: var(--blue-100);
  color: var(--blue-950);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}