/* ============================================================
   DESIGN TOKENS — Material Design 3
   Единый источник визуальных переменных экосистемы.
   Не редактировать напрямую в приложениях —
   переопределять через app.css если нужны отклонения.
   ============================================================ */

:root {
  /* ── Color: Primary (Bold Terracotta) ── */
  --md-primary:                  #B5380A;
  --md-on-primary:               #FFFFFF;
  --md-primary-container:        #FFDBD0;
  --md-on-primary-container:     #3D0900;

  /* ── Color: Secondary ── */
  --md-secondary:                #77574E;
  --md-on-secondary:             #FFFFFF;
  --md-secondary-container:      #FFDBD5;
  --md-on-secondary-container:   #2D150F;

  /* ── Color: Tertiary (Amber) ── */
  --md-tertiary:                 #705D00;
  --md-on-tertiary:              #FFFFFF;
  --md-tertiary-container:       #FFE55C;
  --md-on-tertiary-container:    #211B00;

  /* ── Color: Error ── */
  --md-error:                    #BA1A1A;
  --md-on-error:                 #FFFFFF;
  --md-error-container:          #FFDAD6;
  --md-on-error-container:       #410002;

  /* ── Color: Surface ── */
  --md-surface-dim:              #E5D7D4;
  --md-surface:                  #FFF8F6;
  --md-surface-bright:           #FFF8F6;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low:    #FFF0EC;
  --md-surface-container:        #F9EAE6;
  --md-surface-container-high:   #F3E4E1;
  --md-surface-container-highest:#EEDEDE;
  --md-on-surface:               #231917;
  --md-on-surface-variant:       #524441;
  --md-outline:                  #857370;
  --md-outline-variant:          #D8C2BE;
  --md-inverse-surface:          #392E2C;
  --md-inverse-on-surface:       #FBEEE9;
  --md-inverse-primary:          #FFB4A0;
  --md-scrim:                    rgba(0, 0, 0, 0.32);

  /* ── Legacy color aliases ── */
  --bg:          var(--md-surface);
  --bg2:         var(--md-surface-container-low);
  --bg3:         var(--md-surface-container-high);
  --border:      var(--md-outline-variant);
  --border2:     var(--md-outline);
  --text:        var(--md-on-surface);
  --text-dim:    var(--md-on-surface-variant);
  --text-dimmer: var(--md-outline);
  --accent:      var(--md-primary);
  --accent-light:var(--md-inverse-primary);
  --accent-glow: color-mix(in srgb, var(--md-primary) 12%, transparent);
  --accent-bg:   color-mix(in srgb, var(--md-primary) 8%, transparent);
  --success:     var(--md-tertiary);
  --danger:      var(--md-error);
  --warning:     #A05A00;

  /* ── Typography ── */
  --font-ui:   'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-read: 'EB Garamond', Georgia, serif;

  /* MD3 Type Scale */
  --text-display:   2.25rem;
  --text-headline:  1.5rem;
  --text-title-lg:  1.25rem;
  --text-title:     1rem;
  --text-body-lg:   1rem;
  --text-body:      0.875rem;
  --text-label:     0.75rem;
  --text-label-sm:  0.6875rem;

  /* ── Spacing scale ── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  /* ── Shape (MD3 scale) ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Elevation (MD3) ── */
  --elevation-0: none;
  --elevation-1: 0 1px 3px 1px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.12);
  --elevation-2: 0 2px 6px 2px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.12);
  --elevation-3: 0 4px 8px 3px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.10);
  --elevation-4: 0 6px 10px 4px rgba(0,0,0,0.08), 0 2px 3px rgba(0,0,0,0.10);
  --elevation-5: 0 8px 12px 6px rgba(0,0,0,0.08), 0 4px 4px rgba(0,0,0,0.10);
  --shadow-sm:   var(--elevation-1);
  --shadow-md:   var(--elevation-2);
  --shadow-lg:   var(--elevation-4);

  /* ── Layout ── */
  --header-h:    56px;
  --sidebar-w:   320px;
  --content-max: 840px;

  /* ── Motion (MD3) ── */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate:  cubic-bezier(0, 0, 0, 1);
  --ease-accelerate:  cubic-bezier(0.3, 0, 0.8, 0.15);
  --duration-short:   200ms;
  --duration-medium:  300ms;
  --duration-long:    500ms;
  --ease-out:  var(--ease-standard);
  --duration:  var(--duration-short);
}

/* ── Dark theme ── */
.theme-dark {
  --md-primary:                  #FFB4A0;
  --md-on-primary:               #5D160A;
  --md-primary-container:        #82240B;
  --md-on-primary-container:     #FFDBD0;
  --md-secondary:                #E7BDB6;
  --md-on-secondary:             #44281F;
  --md-secondary-container:      #5D3F37;
  --md-on-secondary-container:   #FFDBD5;
  --md-tertiary:                 #E7C24C;
  --md-on-tertiary:              #3A2F00;
  --md-tertiary-container:       #544500;
  --md-on-tertiary-container:    #FFE55C;
  --md-error:                    #FFB4AB;
  --md-on-error:                 #690005;
  --md-error-container:          #93000A;
  --md-on-error-container:       #FFDAD6;
  --md-surface-dim:              #1A1110;
  --md-surface:                  #1A1110;
  --md-surface-bright:           #41302D;
  --md-surface-container-lowest: #140B0A;
  --md-surface-container-low:    #231917;
  --md-surface-container:        #271D1B;
  --md-surface-container-high:   #322826;
  --md-surface-container-highest:#3D3330;
  --md-on-surface:               #F0E0DD;
  --md-on-surface-variant:       #D8C2BE;
  --md-outline:                  #A08C88;
  --md-outline-variant:          #524441;
  --md-inverse-surface:          #F0E0DD;
  --md-inverse-on-surface:       #392E2C;
  --md-inverse-primary:          #B5380A;
  --md-scrim:                    rgba(0, 0, 0, 0.48);
  --warning:                     #F0B44A;
}

/* ── Violet theme (MD3 Baseline Purple) ── */
.theme-violet {
  --md-primary:                  #6750A4;
  --md-on-primary:               #FFFFFF;
  --md-primary-container:        #EADDFF;
  --md-on-primary-container:     #21005D;
  --md-secondary:                #625B71;
  --md-on-secondary:             #FFFFFF;
  --md-secondary-container:      #E8DEF8;
  --md-on-secondary-container:   #1D192B;
  --md-tertiary:                 #7D5260;
  --md-on-tertiary:              #FFFFFF;
  --md-tertiary-container:       #FFD8E4;
  --md-on-tertiary-container:    #31111D;
  --md-error:                    #B3261E;
  --md-on-error:                 #FFFFFF;
  --md-error-container:          #F9DEDC;
  --md-on-error-container:       #410E0B;
  --md-surface-dim:              #DED8E1;
  --md-surface:                  #FFFBFE;
  --md-surface-bright:           #FFFBFE;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low:    #F7F2FA;
  --md-surface-container:        #F3EDF7;
  --md-surface-container-high:   #ECE6F0;
  --md-surface-container-highest:#E6E0E9;
  --md-on-surface:               #1C1B1F;
  --md-on-surface-variant:       #49454F;
  --md-outline:                  #79747E;
  --md-outline-variant:          #CAC4D0;
  --md-inverse-surface:          #313033;
  --md-inverse-on-surface:       #F4EFF4;
  --md-inverse-primary:          #D0BCFF;
  --md-scrim:                    rgba(0, 0, 0, 0.32);
  --warning:                     #7D5700;
}

/* ── Mobile overrides ── */
@media (max-width: 700px) {
  :root {
    --header-h:  56px;
    --sidebar-w: min(360px, 90vw);
    --s7:        32px;
  }
}