/* ==========================================================================
   FoxDim Design — Foundations: Color & Type
   Source of truth: foxdim.ru portfolio (Дмитрий Фёдоров, UX/UI designer)
   Dark, near-black canvas · single warm-orange accent · Inter throughout.
   ========================================================================== */

/* Self-hosted brand fonts (variable). Inter is the primary family used
   throughout; Montserrat is available as a geometric display alternative. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------- COLOR */
  /* Backgrounds — a tight stack of near-blacks. bg1 is the canvas;
     deeper tones appear on dedicated case pages, lighter ones on cards. */
  --bg-1:        #0C0C0C;   /* primary canvas (body)                       */
  --bg-1-rgb:    12, 12, 12;
  --bg-0:        #050505;   /* deepest — project hero pages                */
  --bg-2:        #0A0A0A;   /* alternating section band                    */
  --surface-1:   #111111;   /* card / panel base                          */
  --surface-2:   #1A1A1A;   /* raised node / flow card                    */
  --surface-3:   #1E1E1E;   /* circular icon wells                        */

  /* Foreground — warm-neutral light greys on black. */
  --fg-1:        #E0E0E0;   /* primary text                               */
  --fg-2:        #CCCCCC;   /* secondary paragraph text                   */
  --fg-3:        #AAAAAA;   /* subtitles / supporting                     */
  --fg-4:        #888888;   /* muted labels / captions                    */
  --fg-on-accent:#0C0C0C;   /* text on orange fills                        */
  --white:       #FFFFFF;   /* pure white — used sparingly for emphasis   */

  /* Accent — the single brand colour. Warm signal orange. */
  --accent:        #F2732F;
  --accent-rgb:    242, 115, 47;
  --accent-soft:   rgba(242, 115, 47, 0.10);  /* tinted fills             */
  --accent-line:   rgba(242, 115, 47, 0.20);  /* tinted borders           */

  /* Hairlines & borders — graphite greys that separate on black. */
  --line-1:      #222222;   /* faint divider                              */
  --line-2:      #333333;   /* standard hairline (most common)            */
  --line-3:      #444444;   /* stronger node outline                      */
  --line-white:  rgba(255, 255, 255, 0.10); /* glass / control outline    */

  /* ----------------------------------------------------------- TYPOGRAPHY */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: 'Montserrat', 'Inter', sans-serif;  /* geometric display alt */

  --w-extralight: 200;   /* hero marquee, eyebrows, nav — the brand voice  */
  --w-light:      300;
  --w-regular:    400;
  --w-medium:     500;   /* card titles, node labels                       */
  --w-semibold:   600;
  --w-bold:       700;   /* big display numerals & case titles             */

  /* Type scale (px → rem at 16px root) */
  --t-eyebrow:  0.75rem;   /* 12px — UPPERCASE label, ls 0.08em            */
  --t-label:    0.875rem;  /* 14px — block heading, ls 0.10em              */
  --t-caption:  0.95rem;
  --t-body:     1.25rem;   /* 20px — long-form paragraph                   */
  --t-lead:     1.8rem;    /* section subtitle                            */
  --t-card:     1.5rem;    /* 24px — project card title                    */
  --t-h3:       2.5rem;
  --t-stat:     3.5rem;    /* counter numerals                            */
  --t-display:  clamp(4rem, 8vw, 8rem);  /* case-study hero               */

  --lh-tight:   1.1;
  --lh-snug:    1.2;
  --lh-body:    1.9;
  --ls-eyebrow: 0.08em;
  --ls-label:   0.10em;

  /* ---------------------------------------------------- RADII / SHADOW / EASE */
  --r-sm:    8px;    /* chips, captions                                    */
  --r-md:    12px;   /* inset images                                       */
  --r-lg:    16px;   /* project & stat cards                               */
  --r-xl:    24px;   /* large feature panels                               */
  --r-pill:  30px;   /* tag pills                                          */
  --r-cta:   50px;   /* pill buttons                                       */
  --r-round: 50%;    /* circular controls, CV badge                        */

  --shadow-card:  0 30px 60px rgba(0, 0, 0, 0.50);
  --shadow-img:   0 -10px 30px rgba(0, 0, 0, 0.50);
  --shadow-node:  0 10px 20px rgba(0, 0, 0, 0.50);
  --shadow-soft:  0 10px 30px rgba(0, 0, 0, 0.35);

  /* The signature easing — used on nearly every transition. */
  --ease-brand: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-expo:  cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:   0.3s;
  --dur-mid:    0.5s;
  --dur-slow:   1.2s;

  --space-page:  2rem;   /* gutter                                         */
  --maxw:        1280px; /* content max width                              */
}

/* ============================================================ SEMANTIC TYPE
   Drop these classes onto elements to inherit the portfolio's voice.
   ========================================================================== */

.ds-eyebrow {            /* "ПРОЕКТЫ", section kicker */
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-extralight);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
}

.ds-block-title {        /* "ПОДХОД К РАБОТЕ" */
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: var(--w-regular);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--accent);
}

.ds-display {            /* case-study hero title */
  font-family: var(--font-sans);
  font-size: var(--t-display);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  color: var(--white);
}

.ds-marquee {            /* oversized running headline */
  font-family: var(--font-sans);
  font-size: 7.5vw;
  font-weight: var(--w-extralight);
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg-1);
}

.ds-card-title {
  font-family: var(--font-sans);
  font-size: var(--t-card);
  font-weight: var(--w-medium);
  color: var(--accent);
}

.ds-lead {               /* section subtitle */
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  font-weight: var(--w-light);
  line-height: 1.6;
  color: var(--fg-3);
}

.ds-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.ds-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--w-regular);
  color: var(--fg-4);
}

.ds-stat {
  font-family: var(--font-sans);
  font-size: var(--t-stat);
  font-weight: var(--w-bold);
  line-height: 1;
  color: var(--accent);
}