/* ============================================================
   CityPlatform — Design Tokens
   Терракотовая дизайн-система городского агрегатора
   Светлая + тёмная («выдержанный кирпич ночью») темы
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Onest:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand: Terracotta scale ---------- */
  --tc-50:  #FBF1EC;
  --tc-100: #F6DECF;
  --tc-200: #ECBCA1;
  --tc-300: #E0997A;
  --tc-350: #E68A5E;   /* brighter accent for dark theme */
  --tc-400: #D2785A;
  --tc-500: #C0563A;   /* primary terracotta / brick */
  --tc-600: #A8472E;
  --tc-700: #8C3A26;
  --tc-800: #6E2F20;
  --tc-900: #4E2218;

  /* ---------- Warm neutrals (clay/sand) ---------- */
  --clay-50:  #FAF6F3;
  --clay-100: #F3ECE6;
  --clay-200: #E8DDD4;
  --clay-300: #D8C8BB;
  --clay-400: #B6A294;
  --clay-500: #8C7A6D;
  --clay-600: #6B5C51;
  --clay-700: #4D4138;
  --clay-800: #33291F;
  --clay-900: #211913;

  /* ---------- Niche accent hues (multi-niche identity) ----------
     Тёплый якорь = терракота (food). Холодные контрасты = health,
     auto, jobs. Каждая ниша: --niche-X (акцент). Мягкий фон и текст
     выводятся в компонентах через color-mix, чтобы работать в обеих темах. */
  --niche-food:    #D2674A;  /* терракота — якорь бренда */
  --niche-service: #D08A2E;  /* амбер-золото */
  --niche-realty:  #5E9152;  /* свежая олива */
  --niche-health:  #2E9D97;  /* яркая бирюза */
  --niche-shop:    #BB5689;  /* ягодная фуксия */
  --niche-event:   #8E5BD0;  /* живой фиолет */
  --niche-auto:    #5277A0;  /* стальной синий */
  --niche-jobs:    #3E93A6;  /* яркий петроль */

  /* ---------- Feedback ---------- */
  --ok:    #3F7D4E;
  --warn:  #C2843C;
  --danger:#C0432F;
  --info:  #4E7A8A;
  --star:  #E0A02E;

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- Spacing scale (4pt) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* ---------- Typography ---------- */
  --font-display: 'Sofia Sans', system-ui, -apple-system, sans-serif;
  --font-ui: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;
  --fs-5xl: 48px;

  --lh-tight: 1.12;
  --lh-snug: 1.28;
  --lh-normal: 1.5;

  /* ---------- Layout ---------- */
  --header-h: 56px;
  --tabs-h: 52px;
  --maxw: 1240px;
  --col-feed: 600px;
  --col-left: 260px;
  --col-right: 300px;
  --dock-h: 54px;
}

/* ============================================================
   LIGHT THEME (default)
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:        #FCF6F1;   /* airy warm cream */
  --bg-sunk:   #F4EAE1;
  --surface:   #FFFFFF;   /* cards */
  --surface-2: #FEFAF7;   /* subtle raised */
  --surface-3: #F7EFE9;   /* inputs */
  --overlay:   rgba(40,28,20,0.42);

  --text:      #2E241D;   /* warm near-black, a touch softer */
  --text-2:    #6F6055;   /* secondary */
  --text-3:    #9C8D80;   /* tertiary / meta */
  --text-on-brand: #FFFFFF;

  --border:    #ECE1D8;
  --border-2:  #DDCEC1;
  --divider:   #F2EAE3;

  --brand:        #D2674A;   /* lighter, friendlier terracotta */
  --brand-strong: #BE5436;
  --brand-soft:   #FCEEE7;
  --brand-soft-2: #F8DDD0;
  --brand-text:   #B14E32;
  --brand-ring:   rgba(210,103,74,0.30);

  --chip-bg:   #F8E8DE;
  --chip-text: #6B5346;

  --shadow-sm: 0 1px 2px rgba(60,38,24,0.06), 0 1px 3px rgba(60,38,24,0.05);
  --shadow-md: 0 2px 6px rgba(60,38,24,0.07), 0 6px 18px rgba(60,38,24,0.07);
  --shadow-lg: 0 8px 24px rgba(60,38,24,0.12), 0 20px 48px rgba(60,38,24,0.12);
  --shadow-dock: 0 -2px 10px rgba(60,38,24,0.05), 0 8px 30px rgba(60,38,24,0.16);

  --img-tint: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(40,20,12,0.55) 100%);
}

/* ============================================================
   DARK THEME — "выдержанный кирпич ночью"
   тёплый тёмно-коричневый, терракота как акцент
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #251B14;   /* lighter, warm brown — airier night */
  --bg-sunk:   #1C130D;
  --surface:   #32261C;   /* cards, clearly lifted */
  --surface-2: #3D2F22;   /* raised */
  --surface-3: #4A3829;   /* inputs */
  --overlay:   rgba(0,0,0,0.55);

  --text:      #F8F1EA;
  --text-2:    #D3C3B4;
  --text-3:    #A6917E;
  --text-on-brand: #2A1810;

  --border:    #473726;
  --border-2:  #5B4631;
  --divider:   #372A1E;

  --brand:        #ED9870;   /* bright, cheerful terracotta */
  --brand-strong: #E27E54;
  --brand-soft:   rgba(237,152,112,0.17);
  --brand-soft-2: rgba(237,152,112,0.26);
  --brand-text:   #F2AC88;
  --brand-ring:   rgba(237,152,112,0.42);

  --chip-bg:   #3D2E20;
  --chip-text: #E0CDBB;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.55), 0 24px 60px rgba(0,0,0,0.55);
  --shadow-dock: 0 -2px 12px rgba(0,0,0,0.4), 0 10px 40px rgba(0,0,0,0.6);

  --img-tint: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%);
}

/* niche accent tweaks on dark — brighter & livelier for legibility */
[data-theme="dark"] {
  --niche-food:    #E68A5E;
  --niche-service: #E2A954;
  --niche-realty:  #93B57F;
  --niche-health:  #4FBDB6;
  --niche-shop:    #D585AC;
  --niche-event:   #B190E0;
  --niche-auto:    #84A3C8;
  --niche-jobs:    #5FB6C8;
}