/* ============================================================
   ALMA ROTA — дизайн-токены. Направление «Хром · Свет».
   Единственный источник правды по цвету, типографике и тени.
   Все компоненты в app.css ссылаются только на эти переменные.
   ============================================================ */

/* ---------- Шрифты (self-hosted, латиница + кириллица) ---------- */
@font-face{
  font-family:"AR Display"; font-weight:800; font-style:normal; font-display:swap;
  src:url("../fonts/unbounded-800-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"AR Display"; font-weight:800; font-style:normal; font-display:swap;
  src:url("../fonts/unbounded-800-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"AR Body"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/manrope-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"AR Body"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/manrope-400-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"AR Body"; font-weight:800; font-style:normal; font-display:swap;
  src:url("../fonts/manrope-800-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"AR Body"; font-weight:800; font-style:normal; font-display:swap;
  src:url("../fonts/manrope-800-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"AR Mono"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/jetbrainsmono-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"AR Mono"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/jetbrainsmono-500-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* угол вращения хромированного градиента */
@property --spin{syntax:'<angle>'; initial-value:0deg; inherits:false}

:root{
  /* ---------- Поверхности: три уровня светлого ---------- */
  --bg:#F1F3F6;          /* алебастр — фон страницы */
  --bg-1:#FBFCFE;        /* бумага — карточки и панели */
  --bg-2:#E7EAEF;        /* утопленный уровень — рамки фото, инпуты в покое */
  --graphite:#14171B;    /* якорь контраста — футер, активные чипы */

  /* ---------- Текст ---------- */
  --fg:#171B21;          /* основной */
  --fg-2:#59616D;        /* вторичный, AA на --bg */
  --fg-3:#8D95A2;        /* подписи и мета */

  /* ---------- Акцент: электрик, только точечно ---------- */
  --blue:#1E48FF;        /* ровно одно первичное действие на экран */
  --blue-deep:#1233C4;   /* hover/active */
  --blue-tint:#E4E9FF;   /* подложка бейджей */

  /* ---------- Семантика (отдельно от акцента) ---------- */
  --ok:#0E7A46;   --ok-tint:#DFF3E8;
  --warn:#8A5A10; --warn-tint:#FDF0DA;
  --bad:#B4231E;

  /* ---------- Линии ---------- */
  --line:rgba(23,27,33,.10);
  --line-2:rgba(23,27,33,.19);

  /* ---------- Тени: свет идёт сверху-слева ---------- */
  --sh-1:0 1px 2px rgba(20,26,40,.05);
  --sh-2:0 10px 26px -14px rgba(20,26,40,.30);
  --sh-3:0 30px 60px -28px rgba(20,26,40,.45);

  /* ---------- Типографика ---------- */
  --f-d:"AR Display","Arial Black",sans-serif;   /* дисплей: заголовки, цены, хром */
  --f-b:"AR Body",system-ui,sans-serif;          /* тело */
  --f-m:"AR Mono",ui-monospace,monospace;        /* данные, лейблы, навигация */

  /* ---------- Ритм ---------- */
  --u:8px;               /* базовая единица, всё кратно 4/8 */
  --radius:0px;          /* направление без скруглений */
  --wrap:1520px;
  --pad:clamp(18px,3.4vw,54px);

  /* ---------- Материал ---------- */
  --panel:linear-gradient(180deg,#FFFFFF,var(--bg-1) 40%,#F4F6F9);
  --metal:linear-gradient(180deg,#FFFFFF,#E2E6EC 46%,#BEC5CF);
  --metal-dark:linear-gradient(180deg,#2C333C,#14171B);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}