/* ==========================================================================
   Spot — токены дизайн-системы
   Палитра из брендбука Spot: чёрный, белый, серый, оранжевый акцент.
   Дневная тема — светлая бумага, ночная — глубокий графит с тёплым свечением.
   ========================================================================== */

@import url('../fonts/fonts.css');

:root {
  /* ---- фирменные константы, одинаковые в обеих темах ---- */
  --brand-ink:      #0A0909;   /* фирменный чёрный */
  --brand-paper:    #FFFFFF;   /* фирменный белый */
  --brand-grey:     #E6E6E6;   /* фирменный светло-серый */
  --brand-accent:   #F7931E;   /* фирменный оранжевый */
  --brand-accent-d: #D97A0C;   /* оранжевый для текста по светлому фону */

  --success: #1F8A4C;
  --danger:  #C6432F;
  --info:    #2F6FC6;

  /* ---- типографика ---- */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    800;

  /* модульная шкала, плавная от 360px до 1440px */
  --fs-display: clamp(2.75rem, 1.6rem + 5.1vw, 6rem);
  --fs-h1:      clamp(2rem, 1.35rem + 2.9vw, 3.75rem);
  --fs-h2:      clamp(1.5rem, 1.15rem + 1.55vw, 2.5rem);
  --fs-h3:      clamp(1.185rem, 1.03rem + 0.7vw, 1.625rem);
  --fs-h4:      clamp(1.0625rem, 0.99rem + 0.33vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;
  --fs-micro:   0.6875rem;

  --lh-tight:   1.04;
  --lh-heading: 1.16;
  --lh-body:    1.6;

  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-body:     0;
  --ls-caps:     0.09em;

  /* ---- отступы, шаг 4px ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter:    clamp(1rem, 0.35rem + 2.7vw, 2.5rem);
  --maxw:      1280px;
  --maxw-text: 62ch;

  /* ---- радиусы ---- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---- анимация ---- */
  --dur-fast:  140ms;
  --dur-base:  260ms;
  --dur-slow:  400ms;
  --dur-photo: 620ms;
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.55, .06, .68, .19);

  --z-base: 1;
  --z-sticky: 60;
  --z-header: 80;
  --z-fab: 90;
  --z-modal: 100;
  --z-toast: 110;

  --header-h: 68px;
}

/* ==========================================================================
   ДНЕВНАЯ ТЕМА — 07:00–19:00
   ========================================================================== */
:root,
[data-theme='day'] {
  color-scheme: light;

  --bg:            #FBFAF8;
  --bg-elevated:   #FFFFFF;
  --bg-sunken:     #F2F1ED;
  --bg-inverse:    #0A0909;

  --surface:       #FFFFFF;
  --surface-2:     #F6F5F2;
  --surface-hover: #F0EFEB;

  --text:          #0A0909;   /* 19.1:1 — AAA */
  --text-muted:    #5C5A57;   /* 6.1:1  — AA на всех светлых поверхностях */
  --text-subtle:   #706D69;   /* 4.6:1  — AA на всех светлых поверхностях */
  --text-inverse:  #FFFFFF;

  --border:        #E6E6E6;
  --border-strong: #D2D1CD;

  --accent:        #F7931E;
  --accent-text:   #9F5F13;   /* 4.5:1 — AA; чистый #F7931E на белом даёт лишь 2.3:1 */
  --accent-contrast: #0A0909; /* текст на оранжевой плашке */
  --accent-soft:   rgba(247, 147, 30, .12);

  --shadow-sm: 0 1px 2px rgba(10, 9, 9, .05), 0 1px 3px rgba(10, 9, 9, .04);
  --shadow-md: 0 4px 10px rgba(10, 9, 9, .06), 0 2px 4px rgba(10, 9, 9, .04);
  --shadow-lg: 0 14px 30px rgba(10, 9, 9, .10), 0 4px 10px rgba(10, 9, 9, .05);
  --shadow-xl: 0 28px 60px rgba(10, 9, 9, .16), 0 8px 20px rgba(10, 9, 9, .07);

  --glow-night: none;
  /* логотип — чёрный SVG; в тёмной теме инвертируем его в белый */
  --logo-filter: none;
  --logo-filter-inverse: invert(1);
  --hero-overlay: linear-gradient(180deg, rgba(251,250,248,.10) 0%, rgba(251,250,248,.72) 62%, var(--bg) 100%);
  --placeholder-bg: linear-gradient(140deg, #F3F1EC 0%, #E7E4DC 100%);
  --skeleton: linear-gradient(90deg, #EFEEEA 25%, #E4E2DC 37%, #EFEEEA 63%);
}

/* ==========================================================================
   НОЧНАЯ ТЕМА — 19:00–07:00
   ========================================================================== */
[data-theme='night'] {
  color-scheme: dark;

  --bg:            #0A0909;
  --bg-elevated:   #131211;
  --bg-sunken:     #060505;
  --bg-inverse:    #FFFFFF;

  --surface:       #151413;
  --surface-2:     #1D1B1A;
  --surface-hover: #232120;

  --text:          #F5F4F2;   /* 18.1:1 — AAA */
  --text-muted:    #A8A5A1;   /* 6.5:1  — AA на всех тёмных поверхностях */
  --text-subtle:   #8B8882;   /* 4.5:1  — AA на всех тёмных поверхностях */
  --text-inverse:  #0A0909;

  --border:        #2A2826;
  --border-strong: #3B3835;

  --accent:        #F7931E;
  --accent-text:   #FBAE4E;   /* 8.6:1 — AAA */
  --accent-contrast: #0A0909;
  --accent-soft:   rgba(247, 147, 30, .16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, .55);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, .6);
  --shadow-xl: 0 32px 70px rgba(0, 0, 0, .7);

  --glow-night: 0 0 0 1px rgba(247, 147, 30, .22), 0 0 26px -6px rgba(247, 147, 30, .38);
  --logo-filter: invert(1);
  --logo-filter-inverse: none;
  --hero-overlay: linear-gradient(180deg, rgba(10,9,9,.35) 0%, rgba(10,9,9,.80) 60%, var(--bg) 100%);
  --placeholder-bg: linear-gradient(140deg, #1B1918 0%, #252220 100%);
  --skeleton: linear-gradient(90deg, #1A1817 25%, #232120 37%, #1A1817 63%);
}