/* ==========================================================================
   SMASH Design System — Colors & Type
   v1.0 · Май 2026
   ========================================================================== */

/* --- Bebas Neue (display / logo) — local file ------------------------------ */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/BebasNeue-Regular.ttf') format('truetype');
}

/* --- Inter (body / UI) — Google Fonts -------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
  /* --- Core palette (4 базовых) ------------------------------------------- */
  --court-green:     #0F4C3A;   /* primary · CTA · logo · dark surfaces */
  --ball-yellow:     #D9F378;   /* accent · NTRP · win · the dot */
  --off-white:       #FAFAF7;   /* surface · background (warm, not white) */
  --deep-ink:        #0F0F0F;   /* type · contrast */

  /* --- Greens ------------------------------------------------------------- */
  --green-100:       #E8F2EE;   /* hover bg, subtle fills */
  --green-200:       #9FE1CB;   /* text on dark green, status */
  --green-400:       #0F6E56;   /* hover CTA, success */
  --green-500:       #0F4C3A;   /* primary */
  --green-700:       #093024;   /* pressed, deep headlines */

  /* --- Yellows ------------------------------------------------------------ */
  --yellow-100:      #F7FBE5;   /* subtle success bg */
  --yellow-500:      #D9F378;   /* primary accent */
  --yellow-700:      #A7C649;   /* hover yellow CTA */
  --yellow-900:      #27500A;   /* text on yellow */
  --yellow-ink:      #173404;   /* alt deep on yellow */

  /* --- Neutrals (warm) ---------------------------------------------------- */
  --cream:           #F1EFE8;   /* pills, chips, secondary surface */
  --mist:            #D3D1C7;   /* borders, dividers */
  --stone:           #888780;   /* tertiary text, disabled */
  --slate:           #5F5E5A;   /* secondary text, meta */
  --ink:             #2C2C2A;   /* primary text alt */
  --black:           #0F0F0F;   /* deep contrast */

  /* --- Semantic ----------------------------------------------------------- */
  --success:         #0F6E56;   /* победы, подтверждения */
  --warning:         #BA7517;   /* споры, нужно внимание */
  --error:           #A32D2D;   /* поражения, ошибки */
  --info:            #185FA5;   /* информационные */

  /* --- Foreground / surface aliases --------------------------------------- */
  --fg-1:            var(--deep-ink);   /* primary text */
  --fg-2:            var(--slate);      /* secondary text, meta */
  --fg-3:            var(--stone);      /* tertiary, disabled */
  --fg-on-dark:      var(--off-white);  /* on green / black */
  --fg-on-accent:    var(--yellow-ink); /* on ball yellow */

  --bg-1:            var(--off-white);  /* page */
  --bg-2:            var(--cream);      /* secondary surface */
  --bg-dark:         var(--court-green);
  --bg-accent:       var(--ball-yellow);
  --bg-ink:          var(--deep-ink);

  --border:          var(--mist);
  --border-strong:   var(--stone);
  --divider:         var(--mist);

  /* --- Type families ------------------------------------------------------ */
  --font-display:    'Bebas Neue', 'Arial Narrow', 'Impact', sans-serif;
  --font-body:       -apple-system, BlinkMacSystemFont, 'SF Pro Text',
                     'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* --- Type scale (px) ---------------------------------------------------- */
  --t-display-xl:    56px;   /* hero */
  --t-display-l:     40px;   /* big headings */
  --t-h1:            30px;
  --t-h2:            22px;
  --t-h3:            18px;
  --t-h4:            16px;
  --t-body-l:        16px;
  --t-body:          14px;
  --t-body-s:        13px;
  --t-caption:       12px;
  --t-tiny:          11px;
  --t-label:         11px;

  --lh-display:      1.05;
  --lh-heading:      1.2;
  --lh-body:         1.5;
  --lh-caption:      1.4;

  --tracking-display-xl: -2px;
  --tracking-display-l:  -1.5px;
  --tracking-h1:         -1px;
  --tracking-h2:         -0.5px;
  --tracking-label:      1.5px;

  /* --- Spacing (multiples of 4) ------------------------------------------ */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-6:   24px;
  --s-8:   32px;
  --s-12:  48px;
  --s-16:  64px;

  /* --- Radii -------------------------------------------------------------- */
  --r-xs:   6px;    /* small badges, pills */
  --r-sm:   8px;    /* large badges, tags */
  --r-md:   12px;   /* secondary cards */
  --r-lg:   14px;   /* cards */
  --r-card: 16px;   /* big cards, buttons */
  --r-full: 9999px;

  /* --- Borders ------------------------------------------------------------ */
  --b-1:   1px solid var(--border);
  --b-strong: 1px solid var(--border-strong);

  /* --- Motion ------------------------------------------------------------- */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro:  180ms;
  --dur-base:   320ms;
  --dur-large:  600ms;
}

/* ==========================================================================
   SEMANTIC ELEMENTS — drop-in defaults
   ========================================================================== */
body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg-1);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: 0;
}

.display-xl, h1.display { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-xl); line-height: var(--lh-display); letter-spacing: var(--tracking-display-xl); }
.display-l            { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-l);  line-height: var(--lh-display); letter-spacing: var(--tracking-display-l); }

h1 { font-size: var(--t-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--t-h2); letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p  { font-size: var(--t-body); color: var(--fg-1); }
small, .caption { font-size: var(--t-caption); color: var(--fg-2); line-height: var(--lh-caption); }
.label  { font-family: var(--font-body); font-size: var(--t-label); font-weight: 500;
          text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--fg-2); }

.mono, code, kbd, pre { font-family: var(--font-mono); }
code { font-size: 0.92em; color: var(--green-500); background: var(--cream);
       padding: 1px 6px; border-radius: var(--r-xs); }

a { color: var(--green-500); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--green-400); }

::selection { background: var(--ball-yellow); color: var(--yellow-ink); }

/* ==========================================================================
   CANONICAL LOGO — single source of truth
   Bebas Neue + yellow dot above the right stroke of H.
   Size: dot = 14% of cap height. right: 0.05em, top: -0.32em.
   ========================================================================== */
.smash-logo {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  display: inline-block;
  position: relative;
  color: var(--court-green);
}
.smash-logo::after {
  content: '';
  position: absolute;
  width: 0.14em;
  height: 0.14em;
  background: var(--ball-yellow);
  border-radius: 50%;
  right: 0.05em;
  top: -0.32em;
}
.smash-logo.dot-yellow::after { background: var(--ball-yellow); }
.smash-logo.dot-green::after  { background: var(--court-green); }
.smash-logo.dot-white::after  { background: var(--off-white); }
.smash-logo.dot-ink::after    { background: var(--deep-ink); }